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輸入元素在更新組件時未更新

回答

相關問題