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功能，依次调用的RoleListremoveRole功能（即穿过列表项的数组，并从组件状态中删除具有匹配ID的那个），它将作为道具传递给RoleCheckpoint。

我在deleteThis功能使用this.forceUpdate()试过了，你可以看到我试着结合输入字段的value到组件的状态（称为text），但仍输入不更新移除组件时来自DOM。

任何帮助表示赞赏，如果你需要更多的澄清，我会很乐意提供。

来源

2017-02-23 Matthew W.

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

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

来源

2017-02-23 22:01:52 Nick

的行为是典型的，当你有组件的列表和你有没有正确设置对象的关键。它需要是标识对象的东西。也许你可以使用名称字段：

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

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

来源

2017-02-23 22:03:50 Meier

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

回答

相关问题