简单的 React 表单没有显示默认值（react Hooks）答案

【问题标题】：Simple React form is not showing the default value (reactHooks)简单的 React 表单没有显示默认值（react Hooks）
【发布时间】：2021-04-12 03:50:32
【问题描述】：

我正在按照官方 React 文档构建一个简单的表单，但是它并没有按预期工作。

const [value, setValue] = useState("banana")

...

<form onSubmit={handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={value} onChange={handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>

据我了解，它必须显示“香蕉”作为初始值，而显示“葡萄柚”。为什么会这样？

这是文档的链接：https://reactjs.org/docs/forms.html

在“表单”部分中，有一个示例来自我获取代码的地方。然而，当我使用 reactHooks 时，它使用基于类的组件。会不会有问题？

非常感谢！

【问题讨论】：

标签： reactjs forms react-hooks

【解决方案1】：

它显示第一个选项，因为value 不是<select> 的属性。如果要选择一个，则需要在其中一个选项中添加selected 属性。

例如：

        <label>
          Pick your favorite flavor:
          <select onChange={handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option selected={true} value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />

这个一般写成

    const options = ["grapefruit", "lime", "coconut", "mango"];
    const selectedValue = "lime";
    <label>
      Pick your favorite flavor:
      <select onChange={handleChange}>
        {options.map(o => (<option value={o} selected={o == selectedValue}>{o}</option>)}
      </select>
    </label>
    <input type="submit" value="Submit" />

【讨论】：

【解决方案2】：

这是因为banana 不在options 中。如果option 的值不存在，那么默认情况下它将选择第一个（默认行为）。 DEMO

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [value, setValue] = useState("mango");

  const handleChange = (e) => {
    setValue(() => {
      return e.target.value;
    });
  };
  return (
    <div className="App">
      <select value={value} onChange={handleChange}>
        <option value="grapefruit">Grapefruit</option>
        <option value="lime">Lime</option>
        <option value="coconut">Coconut</option>
        <option value="mango">Mango</option>
      </select>
    </div>
  );
}

【讨论】：