时间戳

首页 > 解决方案 > 简单的 React 表单未显示默认值 (reactHooks)

reactjs - 简单的 React 表单未显示默认值 (reactHooks)

问题描述

我正在按照官方 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 时，它使用基于类的组件。可能是问题吗？

非常感谢！

标签： reactjsformsreact-hooks

解决方案

它显示第一个选项，因为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" />

推荐阅读