Question

我正在尝试动态创建一个选择字段。单击添加按钮时，它将动态添加选择字段。我有问题，这些值不会改变。

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

Answer 1

我可以看到您有三个问题。

首先，您只有一个 handleRoomChange 函数，它试图同时处理房间变更和董事会变更。您可能还应该有一个 handleBoardChange 函数。

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

第三，您正在尝试使用对象解构将 boardBasic 分配给您的 object.value 变量...但您正在尝试解构 value 而不是解构 object.value .因此，每次运行该函数时，object 都是 value。将赋值替换为 undefined，您将开始获取已定义的值。

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 动态添加选择输入字段

2 个答案: