反应：将输入字段的值与删除的组件相关联

饼干怪兽

我存储了一系列项目this.state.items，用户可以通过单击“修改”按钮来添加/删除项目this.state.items。

我有这样的东西。（此代码未经测试，可能无法编译，但您可能会明白。）

TextField = React.createClass({
    render() {
        return <input type="text"/>;
    }
});

TextList = React.createClass({
    getInitialState () {
        return {
          items: [<TextField />, <TextField />, <TextField />]
        };
    },

    addItem() {
        // Adds a new <TextField /> to this.state.items
    },

    removeItem(index) {
        // Filters out the item with the specified index and updates the items array.
        this.setState({items: this.state.items.filter((_, i) => i !== index)});
    },

    render() {
        return (
            <ul>
            {this.state.items.map((item, index) => {
                return (
                    <li key={index}>
                        {item}
                        <button onClick={this.props.removeItem.bind(null, index)}>Remove</button>
                    </li>
                );
            })}
            </ul>

            <button onClick={this.addItem}>Add New Item</button>
        );
    }
});

这样可以删除中的指定项目this.state.items。我在控制台中看到了它，这部分工作正常。但这不是呈现给用户的。

例如，如果有3个输入字段，并且用户类型分别为“ One”，“ Two”和“ Three”，则如果他单击“ Two”的删除按钮，则将带有“ Three”的输入字段删除。换句话说，总是最后一个字段被删除。

如何解决此问题，以使输入字段的值与删除的字段正确关联？

温特维尔特

这是因为react为了提高速度和效率而根据其键回收项目。因此，使用始终为0、1,2等的索引会产生不良后果。

反应如何工作：