Question

我正在尝试渲染几个必须包含用react-select编写的选择的块。当我改变其中一个值时，他们都会改变它们的价值。我知道关键状态的问题，但我无法想象如何通过另一种方式进行选择更改。

const options = [ 
    {value: 'test1', label: 'First Text'},{value: 'test2', label: 'Second Text'}
]

class Selects extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      selected : options[0]
    }
  }

  changeHandler(option) {
    this.setState({
      selected : option.value
    })
  }

  drawSelects(){
    let numberOfSelects = 3;
    let selects = [];
    for (let i = 0; i < numberOfSelects; i++) {
      selects.push(
        <Select
          value={this.state.selected}
          options={options}
          onChange={this.changeHandler.bind(this)}
          searchable={false}
          clearable={false}
        />
        )
    }
    return selects;
  }

  render(){
    return (
      <div>
        {this.drawSelects()}
      </div>
    )
  }
}

P.S。主要目标是在用户单击特殊按钮时添加具有相同选项的新选择。所以我有一个选择计数器和thx到这个计数器我正在尝试绘制正确数量的选择

Answer 1

您似乎正在为所有选择传递相同的值。尝试使用（未经测试）

之类的东西

String

用循环创建几个react-select

1 个答案: