Question

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

我目前有以下代码：

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中的Semantic UI Dropdown

1 个答案: