更新組件時，React輸入元素未更新

Question

我試圖做的版本做出反應這個 。

您可以看到到目前為止我對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函數（遍歷列表項的數組，並從組件狀態中刪除具有匹配ID的那個），該函數將被傳遞作為RoleCheckpoint的道具。

我已經嘗試在deleteThis函數中使用this.forceUpdate() ，並且如您所見，我已經嘗試將輸入字段的value綁定到組件狀態（稱為text ），但是在刪除組件時輸入不會更新來自DOM。

感謝您的幫助，如果您需要更多說明，我們將很樂意為您提供幫助。

Answer 1

“鍵”是創建元素列表時需要包括的特殊字符串屬性。

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

Answer 2

當您具有組件列表並且未正確設置對象的鍵時，此行為是典型的。 它必須是識別對象的東西。 可能您可以使用名稱字段：

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

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