Reactjs adding and removing input fields

Question

i used reactjs to make input field that has a "plus" sign at the end and when clicked, it adds another input field... but my problem is when I remove the input field, then add again, it keeps multiplying... please check my code and try it... really need your help guys thanks in advance

    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" })
            )
        )
  }

going to make the suggestion to not use jquery with react. It wreaks havoc on the virtual doms expectations. — jmunsch
– jmunsch, Commented Apr 14, 2016 at 5:41

jmunsch · Accepted Answer · 2016-04-14 06:49:35Z

Modify your container class and pass its state to another class:

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" })
            )
        )
     )
  }

And then pass this.state.yourInputs as above and map the props to return a list of inputs:

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

When you call setState it will then re render and pass the new state as props down to the children.

*note: this only a suggestion and not a complete solution nor is it a completely corrrect solution on how to use this.setState, it does however point in the right direction where the dom isnt being manipulated by jquery outside of reacts virtual dom.

And for removal you could pass an array id along as well with a handler that then splices it from yourInputs

Collectives™ on Stack Overflow

Reactjs adding and removing input fields

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related