React 动态添加 select 输入字段

Question

我正在尝试动态创建一个 select 字段。点击添加按钮时，会动态添加select个字段。我遇到了值不变的问题。

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

Answer 1

我看到了三个问题。

首先，您只有一个 handleRoomChange 函数，它试图同时处理房间变化和棋盘变化。您可能也应该有一个 handleBoardChange 函数。

其次，如果你输出option到handleRoomChange里面的控制台，你会注意到option.value是一个数字。因此，当您继续将 list[index][value] 设置为 value 时，您的意思是您希望（例如）roomInputs[1][1] 为 1。roomInputs[1] 没有 1 属性，这就是为什么您最终会在提交时在对象中得到错误的属性。您需要将 roomInputs[1].roomType 设置为值，而不是（在您编写 handleBoardChange 方法时将 boardBasic 属性设置为值）。

第三，您正在尝试使用对象解构将 object.value 分配给您的 value 变量...但是您正在尝试解构 object.value 而不是解构 object.因此，每次运行函数时，value 就是 undefined。用 const { value } = option; 替换赋值，您将开始返回定义的值。

Answer 2

看看我的变化：

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 })
    }}
/>

React 动态添加 select 输入字段

React dynamic add select input field

reactjs

react-select