在ReactJS中添加和删除输入字段且值不重置

Question

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

import React from 'react';
import ReactDOM from 'react-dom';

var fields = "";
var options = ['one','two','three','four','five','six','seven','eight','nine','Ten','eleven','twelve'];

var SelectOptions = React.createClass({
    render:function(){
        var options = this.props.options;
        return (
             <select>
                   {options.map(function(col,index){
                       return (
                         <option key={index} value ={col}> {col} </option>
                       );
                   })}
             </select>
        );

    }
});

var PriceMultiply = React.createClass({
    render:function(){
        return (
           <tr>
             <td>
               Adjust Price Multiply
             </td>
             <td>
               Multiply <SelectOptions options={options} />
             </td>
             <td>
               by <input type="text" name="" />
             </td>
             <td>
               <button className="btn btn-danger" onClick={this.props.removeOperation} > Remove </button>
             </td>
           </tr>           
        );
    }
});

var PriceAdd = React.createClass({
    render:function(){
        return (
           <tr>
             <td>
               Adjust Price (Add)
             </td>
             <td>
               Add <input type="text" name="" />
             </td>
             <td>
               to <SelectOptions options={options} />
             </td>
             <td>
               <button className="btn btn-danger" onClick={this.props.removeOperation} > Remove </button>
             </td>
           </tr>           
        );
    }
});

var ExcludeProducts = React.createClass({
    render:function(){
        return (
           <tr>
             <td>
               Filter Products (Includes) 
             </td>
             <td>
               Exclude Products Where <SelectOptions options={options} />
             </td>
             <td>
              Includes  <input type="text" name="" />
             </td>
             <td>
               <button className="btn btn-danger" onClick={this.props.removeOperation} > Remove </button>
             </td>
          </tr>             
        );
    }
});

var IncludeProducts = React.createClass({
    render:function(){
        return (
           <tr>
             <td>
               Filter Products (Includes) 
             </td>
             <td>
               Exclude Products Where <SelectOptions options={options} />
             </td>
             <td>
              does not equals <input type="text" name="" />
             </td>
             <td>
               <button className="btn btn-danger" onClick={this.props.removeOperation} > Remove </button>
             </td>
          </tr>
        );
    }
});

var DynamicFields = React.createClass({
    getInitialState:function(){
       return {
          operations:[]
       }
    },
    removeOperation:function(index){
        var operations = this.state.operations;
        operations.splice(index,1);
        this.setState({operations:operations});
    },
    addOperation:function(){
         var value = this.refs.operationsDropDown.value;
         this.setState({operations:this.state.operations.concat([value])});
    },
    renderAdjustmentRows:function(){

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

       return (
           <table>
             <tbody>
              {fields}
             </tbody>
           </table>
       );
    },
    render:function(){
        return (
          <div>
            <select className="browser-default" ref="operationsDropDown" id="operations-drop-down">
              <option value="adjust-price-multiply"> Adjust Price (Multiply) </option>
              <option value="adjust-price-add"> Adjust Price (Add) </option>
              <option value="filter-products-includes"> Filter products (Includes) </option>
              <option value="filter-products-excludes"> Filter products excludes </option>
            </select>
            <button onClick={this.addOperation} > Add Operation </button>
            <div id="adjust-import-data-rows">
                 {this.renderAdjustmentRows()}
            </div>
          </div>
        );
    }
});

ReactDOM.render(<DynamicFields />,document.getElementById('container'));

Answer 1

问题是您没有提供removeOperation函数的索引。 在发送索引之前，您的组件应具有索引。 因此，使用索引道具将其传递如下：

renderAdjustmentRows：function（）{

   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()尚未获得索引，而是一个对象。 调用它时，给它正确的索引