我对 ReactJS 还很陌生,我非常喜欢它,但是有些东西(比如绑定(bind))在 Angular 中似乎更容易。
我想要一个表单,用户可以在其中单击按钮来添加额外的输入字段。他们还可以随时“删除”输入字段。
在提交时,我希望将这些输入作为数组获取,即将 dynamicInputs
传递到我的 API,其中包含 name
数组。
这就是我所做的(这可能是错误的,因为我像对待 Angular 一样对待 React):
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
不起作用!它只是始终删除最后一个条目。
最佳答案
每个<div className="input-group">
必须有一个唯一的 key
<div className="input-group" key={index}>
这就是 React 区分渲染节点集合的方式。
引用文献:
UPD:
正如 @WiredPrairie 在下面的评论中提到的 - 建议的解决方案远非理想,因为 index
不够独特。相反,您需要创建另一个具有一些唯一标识符的数组(单调增长的序列就足够了)并与 this.state.inputs
并行维护它。并使用它的值作为键。
因此,在添加元素时:
this.keys.push(++this.counter);
删除时 - 通过相同的index
从两者中删除。并在 .map
你
<div className="input-group" key={this.keys[index]}>
关于javascript - 添加/删除输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29662782/