my attempt fiddle here ..........
https://jsfiddle.net/techboy0007/j1eas924/
https://i.stack.imgur.com/KXFot.png
您可以通过反应状态来实现。在您的情况下,您正在使用嵌套对象,因此在更新它们时需要格外小心。
突变您的想法不是一个好主意,state因为它很容易导致错误或意外行为。
state
仔细查看这些handling功能的工作方式。
handling
在这里,您有一个现场演示。
class App extends React.Component { state = { rows: [] }; handleChange = idx => e => { const { name, value } = e.target; const rows = [...this.state.rows]; rows[idx] = { [name]: value }; this.setState({ rows }); }; handleAddRow = () => { const item = { name: "", mobile: "" }; this.setState({ rows: [...this.state.rows, item] }); }; handleRemoveRow = () => { this.setState({ rows: this.state.rows.slice(0, -1) }); }; render() { return ( <div> <div className="container"> <div className="row clearfix"> <div className="col-md-12 column"> <table className="table table-bordered table-hover" id="tab_logic" > <thead> <tr> <th className="text-center"> # </th> <th className="text-center"> Name </th> <th className="text-center"> Mobile </th> </tr> </thead> <tbody> {this.state.rows.map((item, idx) => ( <tr id="addr0" key={idx}> <td>{idx}</td> <td> <input type="text" name="name" value={this.state.rows[idx].name} onChange={this.handleChange(idx)} className="form-control" /> </td> <td> <input type="text" name="mobile" value={this.state.rows[idx].mobile} onChange={this.handleChange(idx)} className="form-control" /> </td> </tr> ))} </tbody> </table> <button onClick={this.handleAddRow} className="btn btn-default pull-left" > Add Row </button> <button onClick={this.handleRemoveRow} className="pull-right btn btn-default" > Delete Row </button> </div> </div> </div> </div> ); } } render(<App />, document.getElementById("root"));
PD:如果我能给您推荐,我想您需要更多地研究 反应-javascript 向前迈进,因为它将有助于更快地实现此类目标,现在您需要非常了解基础知识。