小编典典

移除输入组件时反应错误

reactjs

我不确定这是否是个问题,但我在这个问题上苦苦挣扎。我试图创建一个简单的示例来发布我的项目:

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')
);

阅读 207

收藏
2020-07-22

共1个答案

小编典典

问题是您将数组索引用作key,因此React将重用前两个li元素,并删除最后一个元素。更改key={index}key={filter.id},它会按预期工作。

关于注释和下注的更新:假定该字段为,我在实际代码中假定过滤器具有唯一性id。CodePen似乎更像是精简版来显示问题。但是,如果您确实希望让每个按钮创建多个文本字段,则确实需要添加一些额外的东西来区分键(例如计数器)。但是,这不会影响问题中所述的问题。

再次查看代码,我发现getInput将其提取到单独的(无状态)组件中是理想的选择,例如FilterInput。与将子渲染保持在组件状态相比,这更适合于react模型。

2020-07-22