更新组件时，React输入元素未更新

Question

我试图做的版本做出反应这个 。

您可以看到到目前为止我对Codepen的了解 。

这里的问题是，当您在文本字段中（在“怀疑的播放器”列下）键入内容，然后单击相邻的名称（在“角色”列下）以删除该行时，文本将保留在输入中，然后与其他名称相邻。
预期的行为是，您将单击名称以删除该行，并且两个元素（名称和文本输入）都将消失。

表中的所有项目都以RoleList类的状态存储在称为checklist的数组中。

表中每个列表项的组成部分是这样的：

class RoleCheckpoint extends React.Component {
    constructor() {
        super();
        this.state = {
            text: ""
        };
    }

    deleteThis() {
        this.props.removeRole(this.props.role.id);
    }

    onChange(e) {
        this.setState({
            text: e.target.value
        });
    }

    render() {
        console.log(this.props);

        return (
            <tr>
                <td className="vertAlign remove noselect" onClick={this.deleteThis.bind(this)}>
                    {this.props.role.el}
                </td>
                <td>
                    <input type="text" className="form-control" spellCheck="false" onChange={this.onChange.bind(this)} value={this.state.text} />
                </td>
            </tr>
        );
    }
}

当您单击名称时，它将调用组件deleteThis函数，该函数依次调用RoleList的removeRole函数（遍历列表项的数组，并从组件状态中删除具有匹配ID的那个），该函数将被传递作为RoleCheckpoint的道具。

我已经尝试在deleteThis函数中使用this.forceUpdate() ，并且如您所见，我已经尝试将输入字段的value绑定到组件状态（称为text ），但是在删除组件时输入不会更新来自DOM。

感谢您的帮助，如果您需要更多说明，我们将很乐意为您提供帮助。

Answer 1

“键”是创建元素列表时需要包括的特殊字符串属性。

<RoleCheckpoint role={role} key={role.id} removeRole={this.removeRole.bind(this)} />

Answer 2

当您具有组件列表并且未正确设置对象的键时，此行为是典型的。 它必须是识别对象的东西。 可能您可以使用名称字段：

<RoleCheckpoint key={role.name} .../>

参见https://facebook.github.io/react/docs/lists-and-keys.html