Hinzufügen und Entfernen von Eingabefeldern in Reactjs mit Werten, die nicht zurückgesetzt werden

Question

Hallo, ich arbeite an einer React-Anwendung, wo es vier Optionen gibt. Wenn ein Benutzer eine Option auswählen, wird das entsprechende Eingabeelement zum Wrapper hinzugefügt funktioniert gut, aber entfernen Operation funktioniert nicht richtig, es entfernt nicht das entsprechende Element.Ein anderes Problem die Werte auf den Eingabefeldern nicht vorhanden, wenn die Komponente rerenders.so Experten führen mich, wie ich erreichen kann entfernen die entsprechende Zeile, wenn die entfernen-Taste und die Eingangswerte geklickt sollte nicht zurückgesetzt werden, wenn die Komponente neu macht

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

Das Problem ist, dass Sie keinen Index für die removeOperation Funktion bereitstellen. Bevor Sie den Index senden, sollten Ihre Komponenten den Index haben. So geben sie Index Requisiten wie folgt:

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} />); 
      } 
    }); 

und der Index Requisiten aus Schaltfläche Entfernen klicken jedes dynamische Komponente senden. Dazu ersetzen Sie alle Entfernen Tasten mit

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

Und Sie werden bekommen, was Sie wollen.

komplette Code ist verfügbar unter https://jsfiddle.net/KishoreBarik/f8h3c82m/

Answer 2

Wahrscheinlich, weil in diesem Stück Code:

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

Es Zustand direkt mutiert, wie folgt:

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

Sie müssen zuerst eine Kopie der Zustandsmatrix machen.
Wenn Sie die erste Zeile ändern:

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

Sie sollten in Ordnung sein ..

Answer 3

Zur Entfernung Ausgabe: removeOperation() wurde der Index nicht gegeben, sondern ein Objekt. Wenn Sie es anrufen, geben Sie ihm den richtigen Index