添加/删除输入字段 [英] Adding/removing input fields

问题描述

我对ReactJS很新，我很喜欢它，但是在Angular中有一些像绑定这样的东西似乎更容易。

I'm pretty new to ReactJS, I'm liking it a lot, but there are some things like binding that seems to be easier in Angular.

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

I want to have a form, where a user can click a button to add extra input fields. At any point, they can also "delete" an input field.

在提交时，我希望将这些输入作为数组，即将 dynamicInputs 传递给我的API，其中包含一个名称的数组。

On the submit, I want to get these inputs as an array, i.e. pass dynamicInputs to my API which contains an array of name.

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

This is what I've done (which is probably wrong since I'm treating React like 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 不起作用！它只是一直删除最后一个条目。

Right now removeInputField does NOT work! It just removes the last entry all the time.

推荐答案

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

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

这就是React如何区分呈现节点的集合。

That's how React distinguishes between collection of rendered nodes.

参考文献：

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

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

UPD ：

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

As @WiredPrairie mentioned below in the comments - the suggested solution is far from ideal, since the index is not unique enough. And instead you need to create another array with some unique identifiers (a monotonously growing sequence would be enough) and maintain it in parallel with this.state.inputs and use its values as keys.

因此，在添加元素时：

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

删除时 - 使用相同的索引删除。并在 .map 中

on removing - remove from both by the same index. And in the .map you

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

这篇关于添加/删除输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！