如果下拉列表使用 Hooks 和 useState 选择了值，如何更新状态

Posted 2023-02-19

【中文标题】如果下拉列表使用 Hooks 和 useState 选择了值，如何更新状态

【英文标题】：how to update the state if dropdown has selected value with Hooks and useState

【发布时间】：2022-01-18 00:45:33

【问题描述】：

我正在学习 react js，当下拉菜单具有默认值时，我需要更新状态，我可以在更改事件上设置状态，但不知道如果第一个该怎么办选项被选中。

Here is the example

代码：

  const [myValue, setMyValue] = useState("");

  return (
    <div>
      <select
        onChange=(e) => setMyValue(e.target.value)
        defaultValue=myValue
      >
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
      </select>
      <h2>
        " "
        You selected" "
        <span style= backgroundColor: "yellow" >myValue</span>
      </h2>
    </div>
  );
 

提交表单时如何将“myValue”设置为option1？

非常感谢！

【问题讨论】：

你有两个选项来解决这个问题。您可以添加一个空选项<option></option>，也可以使用useState("Option 1")将默认状态更改为选项1

我尝试了第二次修复。但是在表单提交上似乎没有设置默认选择的选项。如果有动态值呢

【参考方案1】：

您可以在数组中设置选项，然后将状态设置为数组第一个条目的值。这样状态可以保持动态，这意味着数组可以改变并且总是第一个条目将是第一个选择。

  const options = ["options 1", "option 2", "option 3"];
  const [myValue, setMyValue] = useState(options[0]);

  return (
    <div>
      <select
        onChange=(e) => setMyValue(e.target.value)
        defaultValue=myValue
      >
        options.map((option, idx) => (
          <option key=idx>option</option>
        ))
      </select>
      <h2>
        " "
        You selected" "
        <span style= backgroundColor: "yellow" >myValue</span>
      </h2>
    </div>
)

示例：https://codesandbox.io/s/react-dropdown-using-hook-forked-1kf9e?file=/src/App.js