如何在 React 中使用选项值 Select

Question

我正在学习 React，它很有趣！

我正在使用 react-select.

在 React 中创建注册表单

我正在映射数组中的值：

const options = [ 'female', 'male', 'other']

<Select {...register("gender")} 
          label="Gender"
          fullWidth 
          variant="outlined"
          >
      {options.map(value => (
        <option key={value} value={value}>
          {value}
        </option>
      ))}
      </Select>

但我收到以下警告：

警告：使用 defaultValue 或 value 道具，而不是在 .

上设置 selected

问题：

如何在 defaultValue 或 value 上使用道具？
我正在设置 label="Gender" 但它不可见，为什么？

Answer 1

const options = [
  { value: "female", label: "Female" },
  { value: "male", label: "Male" },
  { value: "other", label: "Other" }
];

export default function App() {
  const [gender, setGender] = useState("");

  const handleChange = (event) => {
    setGender(event.target.value);
  };

  return (
    <div className="App">
      <Select
        value={gender}
        onChange={handleChange}
      >
        {options.map((option) => (
          <MenuItem key={option.value} value={option.value}>
            {option.label}
          </MenuItem>
        ))}
      </Select>
    </div>
  );
}

API参考：https://material-ui.com/api/select/

工作演示：https://codesandbox.io/s/pedantic-jones-dyfwd?file=/src/App.js:119-788

如何在 React 中使用选项值 Select

How to use option value in React Select

reactjs

react-select

react-hooks