Question

我正在创建一个反应组件，允许用户将帐单分配给多个受理人。

我正在使用动态数量的受控数字输入，其中值由组件状态（proposedBillSplit）确定。我这样做是通过准备一系列输入来实现的：

render() {
    let assigneeRows = [];

    for (var i=0; i< this.state.proposedBillSplit.length; i++) {
            assigneeRows.push(
                <input type="number"
                    value={this.state.proposedBillSplit[i][2]}
                    onChange={this.billSplitChanged}/>
             );
     }
     return (<div>{assigneeRows}</div>)
}

这个输入单独工作正常，但是我还想添加一个按钮来平均分割账单，并通过更新状态为每个输入分配新的等量。我试过这样做：

this.setState({
    'proposedBillSplit':
        [this.state.proposedBillSplit.map((allocation, index) => {
            return [
                this.state.proposedBillSplit[index][0],
                this.state.proposedBillSplit[index][1],
                newSplit]
        })]

});

但是我得到一个反应错误，因为它似乎通过改变状态强制输入改变使得输入不受控制（参见下面的错误）？我的代码是否存在问题，或者实际上是否只允许通过用户输入进行输入值更改？

Warning: A component is changing a controlled input of type number to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

反应输入：通过setState强制值

0 个答案: