Reactjs Hinzufügen und Entfernen von Eingabefeldern

Question

Ich habe rectjs verwendet, um Eingabefelder zu erstellen, die am Ende ein Pluszeichen haben. Wenn sie angeklickt werden, fügt sie ein weiteres Eingabefeld hinzu ... aber mein Problem ist, wenn ich das Eingabefeld entferne fügen sie wieder, es hält multiplizieren ... bitte meinen Code überprüfen und versuchen, es ... wirklich brauchen Ihre Hilfe Jungs Vielen dank im Voraus

addInput: function(){ 
    var maxField = 10; //Input fields increment limitation 
    var addButton = $('.add_button'); //Add button selector 
    var wrapper = $('.field_wrapper'); //Input field wrapper 
    var fieldHTML = '<div><input class="form-control categ-field" type="text" name="category[]" placeholder="Category" required> <a href="javascript:void(0);" class="remove_button" title="Remove field"><i class=" glyphicon glyphicon-minus-sign text-yellow"></i></a></div>'; //New input field html 
    var x = 1; //Initial field counter is 1 
    $(addButton).click(function(){ //Once add button is clicked 
     if(x < maxField){ //Check maximum number of input fields 
      x++; //Increment field counter 
      $(wrapper).append(fieldHTML); // Add field html 
     } 
    }); 
    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked 
     e.preventDefault(); 
     $(this).parent('div').remove(); //Remove field html 
     x--; //Decrement field counter 
    }); 
    }, 

    render:(){ 
     return React.createElement(
      "div", 
      { className: "field_wrapper" }, 
      React.createElement("input", { type: "text", name: "category[]", className: "form-control categ-field", placeholder: "Category" }), 
      React.createElement(
       "a", 
       { className: "add_button", title: "Add field", href:"javascript:void(0);", onClick:this.addInput}, 
       React.createElement("i", { className: "glyphicon glyphicon-plus-sign text-green" }) 
      ) 
     ) 
    } 

Answer 1

ändern sie bitte Ihre Container-Klasse und übergeben sie den Zustand in eine andere Klasse:

var ContainerClass = 

React.createClass({ 
getInitialState:function(){ 
    return { 
    yourInputs: [] 
    } 
}, 
addInput:function(){ 
    //use setState here 
    // TODO create an InputClass 
    this.setState({ 
    yourInputs: this.state.yourInputs.push(InputClass) 
    }) 
}, 
removeInput: function(arrayId){ 
    //TODO figure out how to pass arrayId as a prop 
    // and use setState to splice from yourInputs 
}, 
render: function(){ 
     return React.createElement(
      "div", 
      { className: "field_wrapper" }, 
      React.createElement("input", { type: "text", name: "category[]", 
      className: "form-control categ-field", placeholder: "Category", 
      yourInputs: this.state.yourInputs}, 
      React.createElement(
       "a", 
       { className: "add_button", title: "Add field", href:"javascript:void(0);", 
       onClick:this.addInput}, 
       React.createElement("i", { className: "glyphicon glyphicon-plus-sign text-green" }) 
      ) 
     ) 
    ) 
    } 

Und dann übergeben this.state.yourInputs wie oben und zuordnen Sie die Requisiten, um eine Liste von Eingaben zurückzugeben:

React.createElement("div", null, 
      this.props.yourInputs.map(function(AnInput){ 
      return React.createElement(AnInput, null, inputValue); 

Wenn Sie setState aufrufen wird es dann wieder machen und den neuen Staat als Requisiten bis auf die Kinder weitergeben.

* Hinweis: Dies ist nur ein Vorschlag und keine vollständige Lösung noch ist es eine völlig falsche Lösung, wie dies verwendet werden.setState, es zeigt jedoch in die richtige Richtung, wo das dom wird nicht manipuliert von jquery außerhalb reagiert virtuelles Dom.

Und zum Entfernen Sie einen Array-ID mit einem Handler entlang als auch passieren könnten, die von yourInputs Spleißstellen es dann