从状态中删除列表项时输入不变

Question

我创建了一个简单的类，它显示了一个列表，您可以将 li 项添加或删除到状态中。但是，这些 li 项目包含输入框。

假设有 3 个 li 项目，其中包含 3 个输入框。您在第一个列表项的输入框中输入了一些内容，然后您想删除包含您填写的输入的 li。

即使我的索引是正确的，react 总是删除最后一项，或者我认为它删除了最后一项，也许它会删除具有正确索引的确切项，但保留输入的值。我该如何解决这个问题？

class DataTable extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data: [
                {product: 'a', quantity: 0, price: 0},
            ],
        };
    }

    render() {
        if (!this.props.isOpen) {
            return false;
        }
        const items = this.state.data.map((key, i) => {

            return (
                <li key={i}>
                    <input name="text" defaultValue={key.product}/>
                    <buttun className="btn" onClick={this.removeItem.bind(this, i)}/>
                </li>
            )
        })
        return (
            <div>
                <button className="btn" onClick={this.addItem.bind(this)}>Add Product</button>
                <ul>
                    {items}
                </ul>
            </div>
        )
    }

    addItem() {
        const newState = update(this.state.data, {
            $push: [{product: '', quantity: 0, price: 0}]
        });
        this.setState({
            data: newState
        })
    }

    removeItem(index) {
        const newArray = update(this.state.data, {
            $splice: [[index, 1]]
        });
        this.setState({
            data: newArray
        })
    }
}

export default DataTable

Answer 1

不知道这是否是您的问题，但您使用数据索引作为键。仅当您不修改集合时才可以这样做。键必须始终保持不变，发生的情况是您删除一个项目并添加另一个项目，React 认为输入是另一个，因为它的键已更改。

constructor(props) {
    super(props);

    this.state = {
        data: [
            {product: 'a', quantity: 0, price: 0},
        ],
    };
    this.dataKey = 0;
    render() {
        if (!this.props.isOpen) {
            return false;
        }
        const items = this.state.data.map((value) => {

            return (
                <li key={value.key}>
                    <input name="text" defaultValue={value.product}/>
                    <buttun className="btn" onClick={this.removeItem.bind(this, i)}/>
                </li>
            )
        })
        return (
            <div>
                <button className="btn" onClick={this.addItem.bind(this)}>Add Product</button>
                <ul>
                    {items}
                </ul>
            </div>
        )
    addItem() {
        const newState = update(this.state.data, {
            $push: [{product: '', quantity: 0, price: 0, key: this.dataKey++}]
        });
        this.setState({
            data: newState
        })
    }

    removeItem(index) {
        const newArray = update(this.state.data, {
            $splice: [[index, 1]]
        });
        this.setState({
            data: newArray
        })
    }
}

它必须是独特且恒定的。例如，一个 Id 将对此有好处。 https://facebook.github.io/react/docs/lists-and-keys.html