Javascript 添加/删除输入字段

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

我想要一个表单，用户可以点击按钮添加额外的输入字段。在任何时候，他们也可以“删除”输入字段

在提交时，我希望以数组的形式获取这些输入，即将

dynamicInputs

传递给我的API，该API包含

name

数组

这就是我所做的（这可能是错误的，因为我将React视为角度）：

var React=require（'React'）；
module.exports=React.createClass({
addInputField:函数（e）{
e、 预防默认值（）；
var输入=this.state.inputs；
push（{name:null}）；
this.setState（{inputs:inputs}）；
},
removeInputField:函数（索引）{
var输入=this.state.inputs；
输入。拼接（索引1）；
this.setState（{inputs:inputs}）；
},
handleSubmit:函数（e）{
e、 预防默认值（）；
//我在这里干什么？
},
getInitialState:函数（）{
返回{输入：[]}；
},
渲染：函数（）{
var输入=this.state.inputs；
返回(
//设置表单
//废话
动态输入
{inputs.map（函数（输入，索引）{
var ref=“输入”+索引；
返回(
)
}.bind（this））}
添加输入
);
}
});

现在

removeInputField

不起作用！它只会一直删除最后一个条目。

每个

都必须有唯一的密钥

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

删除时-通过相同的

索引从两个位置删除。在
.map
中

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


您检查控制台了吗？它应该说明您必须为您的
设置
键，使用
索引
可能会导致在处理删除/添加项的数组时出现问题。@wiredparie这是一个有效点。然后OP需要单独维护一个唯一值数组。@WiredPairie添加了一个修复：-）@zerkms现在我没有足够的知识应用你的答案，你能详细说明一下吗，因为我也有同样的问题
this.keys.push(++this.counter);

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