将输入值添加到 React 中的语义 UI 下拉列表

Question

最近我有一个 select 输入，但是通过双向绑定到我的输入 fields.The select 输入具有输入字段的值作为它的选项。使用语义UI，我需要使用数组。如何更新数组状态以便我可以 select 我在下拉列表中的输入？

我目前有以下代码：

this.state = {
      options: []
    };

 onChange(e) {
    var arrayvar = this.state.options.slice();
    arrayvar.push({ name: e.target.name, value: e.target.value });
    this.setState({ options: arrayvar });
  }

//Input example
      <Input
              type="text"
              placeholder="Answer 3"
              name="answer3"
              onChange={this.onChange}
              required
            />

Answer 1

只需使用数组索引而不是对象键来更改选项，数组是一个对象，其中键是索引

handleChange(e){
    const index = parseInt(e.target.name),
        value = e.target.value,
        options = this.state.options.slice();

    options[index] = {value: value, text: value};
    this.setState({options: options});
}

render(){
    return (
      <div>
        <Input 
          name='1'
          placeholder='option' 
          onChange={this.handleChange}
         />
        <Select placeholder='Select your option' 
          options={this.state.options} />
      </div>
    );  
}

代码：https://codesandbox.io/s/54wk6y9qrx

将输入值添加到 React 中的语义 UI 下拉列表

Add input value to Semantic UI Dropdown in React

reactjs

semantic-ui

semantic-ui-react