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

Question

I'm trying to make a React version of this .

You can see what I have so far on this Codepen .

The issue here is that when you type into a text field (under the "Suspected Player" column) and then click the adjacent name (under the "Role" column) to remove that row, the text persists inside the input, and is then adjacent to a different name.
The expected behavior is that you'd click the name to remove the row and both the elements (the name and text input) would disappear.

All the items in the table are stored in an array called checklist in the state of the RoleList class.

The component for each list item in the table is this:

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

When you click on the name it invokes the components deleteThis function, which in turn invokes RoleList 's removeRole function (that goes through the array of list items, and removes the one with the matching ID from the components state), which is being passed as a prop to RoleCheckpoint .

I've tried using this.forceUpdate() in the deleteThis function, and as you can see I've tried binding the input field's value to the components state (called text ), yet still the input doesn't update when removing the component from the DOM.

Any help is appreciated, if you need more clarification I'll be happy to provide it.

Answer 1

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

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

Answer 2

The behaviour is typical when you have a list of components and you have not set the key of the objects correctly. It need to be something that identifies the object. Probably you can use the name field:

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

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