Javascript 更新组件时响应输入元素未更新

我在试着做一个反应版的

你可以看到我到目前为止所做的

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

表中的所有项目都存储在名为

checklist

的数组中，处于

RoleList

类的状态

表中每个列表项的组件如下所示：

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>
        );
    }
}

类RoleCheckpoint扩展React.Component{
构造函数（）{
超级（）；
此.state={
案文：“”
};
}
删除此（）{
this.props.removole（this.props.role.id）；
}
onChange（e）{
这是我的国家({
文本：e.target.value
});
}
render（）{
console.log（this.props）；
返回(
{this.props.role.el}
);
}
}

当您单击名称时，它将调用components

deleteThis

函数，该函数反过来调用

RoleList

的

RemoveOLE

函数（该函数遍历列表项数组，并从components状态中删除具有匹配ID的项），该函数作为道具传递给

RoleCheckpoint

我尝试在

删除此

函数中使用

this.forceUpdate（）

，正如您所见，我尝试将输入字段的

值

绑定到组件状态（称为

文本

），但从DOM中删除组件时，输入仍然不会更新

任何帮助都是感激的，如果你需要更多的澄清，我很乐意提供

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

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

---

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

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

---

请参见

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

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

看