我不确定这是否是个问题,但我在这个问题上苦苦挣扎。我试图创建一个简单的示例来发布我的项目:
https://codepen.io/as3script/pen/VMbNdz?editors=1111
该示例上有四个按钮。
要重现该问题,请按前三个按钮中的每个按钮以从中创建文本输入并输入一个值。例如,在第一个输入100,在第二个输入200,第三个输入300。现在按第四个按钮删除第一个输入。
它应该将第二和第三保持其各自的值200和300,但相反,它在第二和第二显示100。
此代码与CodePen上的代码相同,只是不允许在没有此链接的情况下发布链接。
class ButtonComponent extends React.Component { constructor(props) { super(props); this.state = {filtersArr:[]} this.addButtons = this.addButtons.bind(this); this.removeButtons = this.removeButtons.bind(this); this.getInput = this.getInput.bind(this); this.onChangeHandler = this.onChangeHandler.bind(this); } addButtons(e){ let tempArr = this.state.filtersArr; tempArr.push({comp:this.getInput(e.target.id), id:e.target.id}); this.setState({filtersArr:tempArr}); } removeButtons(e){ console.log(e.target.id); let newArr = this.state.filtersArr.filter((filter)=>{ return (filter.id !=='FirstButton') }) this.setState({filtersArr:newArr}); } onChangeHandler(e){ console.log(e.target.value); } getInput(id){ return ( <div> <h6>{id}</h6> <input id="min" type="text" placeholder="min" onChange={this.onChangeHandler}/> </div> ) } render() { let styles = { display:'inline-block' } return ( <div> <p>Add three buttons and enter the number in each input, and remove amt.</p> <button id="FirstButton" onClick={this.addButtons}>FirstButton</button> <button id="SecondButton" onClick={this.addButtons}>SecondButton</button> <button id="ThirdButton" onClick={this.addButtons}>ThirdButton</button> <button id="FirstButton" onClick={this.removeButtons}>Remove firstButton</button> <ul> {this.state.filtersArr.map((filter, index)=>{ return <li style={styles} key={index}>{filter.comp}</li> }) } </ul> </div> ); } } ReactDOM.render( <ButtonComponent/>, document.getElementById('root') );
问题是您将数组索引用作key,因此React将重用前两个li元素,并删除最后一个元素。更改key={index}为key={filter.id},它会按预期工作。
key
li
key={index}
key={filter.id}
关于注释和下注的更新:假定该字段为,我在实际代码中假定过滤器具有唯一性id。CodePen似乎更像是精简版来显示问题。但是,如果您确实希望让每个按钮创建多个文本字段,则确实需要添加一些额外的东西来区分键(例如计数器)。但是,这不会影响问题中所述的问题。
id
再次查看代码,我发现getInput将其提取到单独的(无状态)组件中是理想的选择,例如FilterInput。与将子渲染保持在组件状态相比,这更适合于react模型。
getInput
FilterInput