Question

您好我正在开发一个React应用程序，其中有四个选项。当用户选择一个选项时，相应的输入元素将被添加到包装器中。在以下代码中添加操作正常但删除操作不能正常工作，它不会删除相应的元素。另一个问题是当组件重新出现时输入字段上的值不存在。所以专家指导我如何实现在单击删除按钮时删除相应的行并且组件重新渲染时不应重置输入值

config

Answer 1

问题是您没有为removeOperation功能提供索引。在发送索引之前，组件应具有索引。所以使用索引道具传递它如下：

renderAdjustmentRows：函数（）{

   fields = this.state.operations.map((operation,index) =>{
          if(operation == "adjust-price-multiply"){
                return (<PriceMultiply key={index} index={index} removeOperation={this.removeOperation} />);
          }else if(operation == "adjust-price-add"){
                 return (<PriceAdd key={index} index={index} removeOperation={this.removeOperation} />);
          }else if(operation == "filter-products-includes"){
                  return (<IncludeProducts key={index} index={index} removeOperation={this.removeOperation} />);
          }else if(operation == "filter-products-excludes"){
                  return (<ExcludeProducts key={index} index={index} removeOperation={this.removeOperation} />);
          }
    });

从每个动态组件的删除按钮单击发送索引道具。为此，用

替换所有删除按钮

 <button className="btn btn-danger" onClick={this.props.removeOperation.bind(null, this.props.index)} > Remove </button>

你会得到你想要的东西。

完整代码位于https://jsfiddle.net/KishoreBarik/f8h3c82m/

Answer 2

可能是因为在这段代码中：

removeOperation:function(index){
  var operations = this.state.operations;
  operations.splice(index,1);
  this.setState({operations:operations});
},

您正在直接改变状态，如下所示：

var operations = this.state.operations; // operations now points to array in state
operations.splice(index,1);             // splice mutates operations directly
// effect of these 2 statements is the same as
this.state.operations.splice(index,1);

您需要先对状态数组进行复制。
如果您将第一行更改为：

var operations = this.state.operations.slice();

你应该没事......

Answer 3

对于删除问题：removeOperation()尚未获得索引，而是一个对象。当你调用它时，给它一个正确的索引

使用不重置的值在Reactjs中添加和删除输入字段

3 个答案: