Adding/removing 输入字段

Question

我是 ReactJS 的新手，我很喜欢它，但是有些东西，比如绑定，在 Angular 中似乎更容易。

我想要一个表单，用户可以在其中单击一个按钮来添加额外的输入字段。在任何时候，他们还可以 "delete" 输入字段。

在提交时，我想将这些输入作为一个数组获取，即将 dynamicInputs 传递给我的 API，其中包含一个 name 的数组。

这就是我所做的（这可能是错误的，因为我对待 React 就像 Angular）：

var React = require('react');

module.exports = React.createClass({
    addInputField: function(e) {
        e.preventDefault();

        var inputs = this.state.inputs;
        inputs.push({name: null});
        this.setState({inputs : inputs});
    },
    removeInputField: function(index) {
        var inputs = this.state.inputs;
        inputs.splice(index, 1);
        this.setState({inputs : inputs});
    },
    handleSubmit: function (e) {
        e.preventDefault();
        // What do I do here?
    },
    getInitialState: function() {
        return {inputs : []};
    },
    render: function (){
        var inputs = this.state.inputs;
        return (
            // Setting up the form
            // Blah blah
           <div className="form-group">
               <label className="col-sm-3 control-label">Dynamic Inputs</label>
               <div className="col-sm-4">
                   {inputs.map(function (input, index) {
                       var ref = "input_" + index;
                       return (
                           <div className="input-group">
                                <input type="text" className="form-control margin-bottom-12px" placeholder="Enter guid" value={input.name} ref={ref} aria-describedby={ref} />
                                <span className="input-group-addon" onClick={this.removeInputField.bind(this, index)} id={ref} ><i className="fa fa-times"></i></span>
                           </div>
                       )
                   }.bind(this))}
                    <button className="btn btn-success btn-block" onClick={this.addInputField}>Add Input</button>
               </div>
           </div>
        );
    }
});

现在 removeInputField 不起作用！它只是一直删除最后一个条目。

Answer 1

每个 <div className="input-group"> 必须有一个唯一的键

<div className="input-group" key={index}>

这就是 React 区分渲染节点集合的方式。

参考文献：

https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

UPD:

正如@WiredPrairie 在下面的评论中提到的那样 - 建议的解决方案远非理想，因为 index 不够独特。相反，您需要创建另一个具有一些唯一标识符的数组（单调增长的序列就足够了）并将其与 this.state.inputs 并行维护并将其值用作键。

因此，在添加元素时：

this.keys.push(++this.counter);

删除时 - 通过相同的 index 从两者中删除。而在 .map 你

<div className="input-group" key={this.keys[index]}>

Adding/removing 输入字段

Adding/removing input fields

javascript

reactjs