更新组件时反应输入元素未更新答案

【问题标题】：React Input Element Not Updating When Updating Component更新组件时反应输入元素未更新
【发布时间】：2017-07-14 13:56:43
【问题描述】：

我正在尝试制作 this 的 React 版本。

您可以在this 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 函数（该函数遍历列表项数组，并从组件状态），它作为道具传递给RoleCheckpoint。

我尝试在deleteThis 函数中使用this.forceUpdate()，如您所见，我尝试将输入字段的value 绑定到组件状态（称为text），但输入仍然没有'从 DOM 中移除组件时不更新。

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

当您有一个组件列表并且您没有正确设置对象的键时，这种行为是典型的。它必须是识别对象的东西。或许您可以使用名称字段：

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

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

【讨论】：