如何在 reactjs 和 Mongodb 中使用 material-ui 处理 select 更改

Question

我有更新输入字段的代码

    const handleInputChange = event => {
        const { name, value } = event.target
        setUser({ ...user, [name]: value })
    }

我想接近相同的想法，但使用 Select 组件

我的 select 组件来自注册页面：

        <Select
          id="framework"
          value={FrameworkValue}
          onChange={handleChange}
          fullWidth
          label="Framework"
          margin="normal"
        >
        <MenuItem value={'Information Security'}>Information Security</MenuItem>
          <MenuItem value={'Health'}>Health</MenuItem>
          <MenuItem value={'Quality Management'}>Quality Management</MenuItem>
          <MenuItem value={'Financial'}>Financial</MenuItem>
        </Select>

Answer 1

您需要将 name 和 value 属性传递给 Select 组件，如下所示。

    <Select
      ...
      value={user.framework}
      onChange={handleInputChange}
      ...
      ...
      name="framework"
    >
    <MenuItem value={'Information Security'}>Information Security</MenuItem>
      <MenuItem value={'Health'}>Health</MenuItem>
      <MenuItem value={'Quality Management'}>Quality Management</MenuItem>
      <MenuItem value={'Financial'}>Financial</MenuItem>
    </Select>

Code sandbox

如何在 reactjs 和 Mongodb 中使用 material-ui 处理 select 更改

How to handle select change using material-ui in reactjs and Mongodb

reactjs

react-redux

react-hooks