如何在 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 。

问题：

1. 如何使用defaultValue 或value 道具？
2. 我设置了 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