Question

我使用reactjs来创建在结尾处有“加号”符号的输入字段，当点击时，它会添加另一个输入字段......但我的问题是当我删除输入字段，然后再次添加时，它会不断增加...请检查我的代码并尝试...真的需要你的帮助家伙提前感谢

    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

修改容器类并将其状态传递给另一个类：

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

然后如上所述传递this.state.yourInputs并映射道具以返回输入列表：

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

当你致电setState时，它会重新渲染并将新状态作为道具传递给孩子们。

*注意：这只是一个建议，而不是一个完整的解决方案，也不是一个关于如何使用this.setState的完全正确的解决方案，但它确实指向了dom不被jquery操纵的正确方向反应虚拟DOM。

对于删除，你可以传递一个数组ID，然后使用一个处理程序，然后从yourInputs

拼接它

Reactjs添加和删除输入字段

1 个答案: