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

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

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