我正在尝试制作一个这的反应版本。
您可以看到我到目前为止在这个科迪芬上的情况。
这里的问题是,当您键入一个文本字段(在“可疑玩家”列下),然后单击相邻的名称(在“角色”列下)以删除该行时,文本将保留在输入中,然后与另一个名称相邻。
预期的行为是单击名称移除行,两个元素(名称和文本输入)都将消失。
表中的所有项都存储在一个名为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>
);
}
}当您单击名称时,它调用组件deleteThis函数,该函数反过来调用RoleList的removeRole函数(该函数遍历列表项数组,并从components状态中删除具有匹配ID的项),该函数正作为支柱传递给RoleCheckpoint。
我尝试在this.forceUpdate()函数中使用deleteThis,如您所见,我尝试将输入字段的value绑定到组件状态(称为text),但是在从DOM中删除组件时,输入仍然没有更新。
任何帮助都很感激,如果你需要更多的澄清,我很乐意提供它。
发布于 2017-02-23 22:01:52
"key“是创建元素列表时需要包含的特殊字符串属性。
<RoleCheckpoint role={role} key={role.id} removeRole={this.removeRole.bind(this)} />发布于 2017-02-23 22:03:50
当您有一个组件列表并且没有正确设置对象的键时,这种行为是典型的。它必须是识别对象的东西。您可能可以使用name字段:
<RoleCheckpoint key={role.name} .../>请参阅https://facebook.github.io/react/docs/lists-and-keys.html
https://stackoverflow.com/questions/42426705
复制相似问题