React：将数组绑定到动态添加的字段

pram 发表于 Dev

婴儿车

可以说我有一个带有状态级别数组的类

ElementsClass = React.createClass({
    getInitialState: function() {
      return {
          elements: []
      }
    },
    addElement: function() {
        var element = {
            name: ""
        };
    },
    render() {
        return (
            {this.state.elements.map(function (element, i) {
                    return <input value={element.name} />
                }
            )}
        )
}

我的想法是可以动态添加到elements数组，并出现一个新的输入字段。

如何绑定数据，以便能够更改输入字段中的值并使该值自动反映在elements数组中的正确元素中？

杰西·克纳汉（Jesse Kernaghan）

要将输入与状态数组动态同步，可以使用react-catalyst包中调用linkState的someting 。使用npm安装后，可以通过以下方式使用它：

 //need to import
import Catalyst from 'react-catalyst'; 

ElementsClass = React.createClass({
    // mixin the linkedstate component
    mixins : [Catalyst.LinkedStateMixin],       

    getInitialState: function() {
      return {
          elements: []
      }
    },
    addElement: function() {
        var element = {
            name: ""
        };

        //add to elements array
        this.state.elements.push(element);

        //let react know to rerender necessary parts
        this.setState({
            elements : this.state.elements
        });
    },
    render() {
        return (
            {this.state.elements.map(function (element, i) {
                    //use the linkState method
                    return <input valueLink={this.linkState('elements.'+i+'.name')} />
                }
            )}
        )
}

我们需要该react-catalyst软件包的原因是valueLink，在您的情况下，本机React只会链接顶级状态项elements。显然，这并不是特别有用，但值得庆幸的是，这是一个很容易解决的问题。

注意：对于迭代项（例如元素输入），您需要提供唯一键。如下所示（可能需要修改以更具体）：

{this.state.elements.map(function (element, i) {
        //use the linkState method
        return <input valueLink={this.linkState('elements.'+i+'.name')} key={'elinput' + i} />
    }
)}

这不会对您的应用产生任何外在影响，主要是为了帮助内部响应目标元素。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。