如何在React中设置选择输入的值？

为选项添加selected属性

设置<select>输入值的一种常见方法是在其中一个<option>元素上添加selected属性。例如：

const Select = ({ values, callback, selected }) => {
  return (
    <select
      disabled={disabled}
      readOnly={readonly}
      onChange={({ target: { value } }) => callback(value)}
    >
      {values.map(([value, text]) => (
        <option selected={selected === value} value={value}>
          {text}
        </option>
      ))}
    </select>
  );
}

设置选择的值

虽然这种方法与HTML非常相似，感觉直观，但有一种更简单的方法可以实现相同的效果。React为我们提供了一个共享的API，用于<input type="text">、<textarea>和<select>之间，我们可以使用value或defaultValue（取决于输入是否受控）来设置字段的值。

使用这个API，我们可以减少检查选中值的工作量，同时使代码更易于阅读和更新。下面是一个例子：

const Select = ({ values, callback, selected }) => {
  return (
    <select
      disabled={disabled}
      readOnly={readonly}
      defaultValue={selected}
      onChange={({ target: { value } }) => callback(value)}
    >
      {values.map(([value, text]) => (
        <option value={value}>
          {text}
        </option>
      ))}
    </select>
  );
}

请注意，上述实现使用了defaultValue，因此意味着该组件是非受控组件。您可以通过使用value而不是defaultValue将此Select组件转换为受控组件。

有关该组件的更详细说明以及使用示例，请查看Select组件。