如何在功能组件的选择标签中使用 defaultValue？

Posted 2023-03-15

【中文标题】如何在功能组件的选择标签中使用 defaultValue？

【英文标题】：How to use defaultValue in the select tag in a functional component?

【发布时间】：2020-09-25 21:14:47

【问题描述】：

我有一个功能组件，其中包含一个带有几个选项的选择标签。 我想将汽车设置为默认值。 最初，我只是在汽车的选项中添加了 selected ，但 react 给了我一个警告，说我应该在 select 标签中使用 defaultValue 。我想知道我该怎么做？

提前致谢。

function ChooseOptions(props) 
  return (
    <div>
      <h2>Choose Options</h2>
      <label>
        New Only <input type="checkbox" />
      </label>

      <label
        htmlFor="selectType"
        style= display: "block" 
        defaultValue="Cars"
      >
        Select Type
        <select id="selectType">
          <option value="all">All</option>
          <option value="cars">Cars</option>
          <option value="trucks">Trucks</option>
          <option value="convertibles">Convertibles</option>
        </select>
      </label>
    </div>
  );

【参考方案1】：

试试这个。

你会在'onChange'道具中得到变化值，

你可以通过传递 'value' 属性来设置值

  <select id="selectType" defaultValue="cars">
            <option value="all">All</option>
            <option value="cars">Cars</option>
            <option value="trucks">Trucks</option>
            <option value="convertibles">Convertibles</option>
        </select>