reactjs - react 动态添加选择输入字段

Question

我正在尝试动态创建一个选择字段。单击添加按钮时，它将动态添加选择字段。我遇到了值不变的问题。

我的代码可以在codesandbox上查看:
https://codesandbox.io/s/react-select-field-dynamically-uo4dy?file=/src/App.js

Answer 1

看看我的变化:

Forked sandbox

// I added a 3rd argument for the name:    
const handleRoomChange = (option, index, name) => {
    const value = option.value; // you had this as 'const { value } = option.value' which dereferences value twice
    console.log(value);
    const list = [...roomInputs];
    list[index][name] = value; //you had this as list[index][value]
    setRoomInputs(list);
  };


// onChange passes the name as 3rd argument to handleRoomChange
<Select
   name="boardBasic"
    placeHolder="Board"
    value={options.value}
    onChange={option => handleRoomChange(option, i, "boardBasic")}
    options={options}
    styles={{
        menu: (provided) => ({ ...provided, zIndex: 9999 })
    }}
/>