Question

因此在我的本机React中，我有一个微调器，用于输入数字。它有两个增加或减少值的按钮。但是问题是我必须将值设置为状态，并且我有多个元素。因此，如果我更改一个元素的值，其他所有内容也会更改。

这是我正在使用的示例代码：

this.state = {
 qty: null,
}

<InputSpinner
    max={50}
    min={1}
    step={1}
    width={100}
    height={50}
    colorMax={"#2a292d"}
    colorMin={"#2a292d"}
    buttonFontSize={13}
    value={this.state.qty}
    onChange={(num) => {
    this.setState({qty: num});
 }}/>

因此，在更改时，我将设置qty状态。但是我有多个微调器，更改一个微调器会更改所有内容，因为每个微调器使用相同的状态。有什么更好的解决方案？我应该使用数组存储每个项目的数量吗？

Answer 1

对我来说，更好的解决方案是为每个微调器分配一个ID，然后使用key = spinnerID和value = num创建对象

this.state = {
 qty: {},
}

<InputSpinner
    max={50}
    min={1}
    step={1}
    width={100}
    height={50}
    colorMax={"#2a292d"}
    colorMin={"#2a292d"}
    buttonFontSize={13}
    value={this.state.qty['1'] || 1}
    onChange={(num) => {
    let qty = Object.assign({}, this.state.qty);
    qty['1'] = num;
    this.setState({qty});
 }}/>

Answer 2

是的，显然您需要为每个微调器维护多个状态，永远不要使用一个状态。我建议使用

这样的数组

`
this.state = {
spinnerValues:[]
}
`

和输入微调器的onChange，您可以做些类似

`
 onChange={(num) => {
let currentState = this.state.spinnerValues;
currentState[i] = num; // here  i is the index which you will provide for the spinner num
    this.setState({spinnerValues: currentState});
`

以及每个微调框的值

value = {this.state.spinnerValues[i]}

在状态上设置元素的不同值

2 个答案: