Question

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

假设有3个li项目，其中有3个输入框。您在第一个列表项的输入框中键入内容，然后要删除包含已填充输入的li。

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

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认为输入是另一个，因为它的密钥已经改变。

{{1}}

它必须是独特且不变的东西。例如，Id对此有好处。 https://facebook.github.io/react/docs/lists-and-keys.html

从状态中删除列表项时输入不会更改

1 个答案: