将初始值绑定到 material ui select

Question

我在我的 React 应用程序中使用 material ui。我正在使用 select 组件。我想将一些初始值绑定到 select 控件。我曾尝试使用 useState 挂钩。它不工作。下面是我正在使用的代码。

const userContributors=[{
  firstName: "user101",
  id: "1",
  role: "Users"
},{
  firstName: "user102",
  id: "2",
  role: "Users"
},{
  firstName: "user103",
  id: "3",
  role: "Users"
}]

const [ApplicationAdminUsers, SetApplicationAdminUsers] = useState([
{
  firstName: "user101",
  id: "1",
  role: "Users"
}
]);

<FormControl
                variant="outlined"
                margin="normal"
                InputLabelProps={{
                  shrink: true
                }}
                validators={["required"]}
                errorMessages={["Select Application Admin"]}
                className={[
                  classes.formControl,
                  "fullWidthControl",
                  "multiselect-checkbox"
                ].join(" ")}
              >
                <InputLabel
                  ref={inputLabel}
                  htmlFor="select-multiple-checkbox"
                  className="multi-label-top"
                >
                  Select Users...
                </InputLabel>
                <Select
                  multiple
                  value={ApplicationAdminUsers}
                  onChange={handleChangeUserContributores}
                  className="multi-input-padding"
                  validators={["required"]}
                  errorMessages={["Select Application Admin"]}
                  input={
                    <OutlinedInput
                      labelWidth={labelWidth}
                      id="select-multiple-checkbox"
                    />
                  }
                  MenuProps={MenuProps}
                >
                  {userContributors.map((item, index) => (
                    <MenuItem key={"aa" + item.id} value={item}>
                      {item.firstName}
                    </MenuItem>
                  ))}
                </Select>
              </FormControl>

我在这里将其用作多 select 控件。解决此问题的任何解决方案。谢谢

Answer 1

您不能使用对象作为输入值，它必须是字符串。

此外，您还没有处理 onChange 以将数组更新为 add/remove 项。

举个简单的例子。

const userContributors=["joe", "bob", "tim"]

...

const [ApplicationAdminUsers, SetApplicationAdminUsers] = useState(["joe"]);

...

<Select
 multiple
 value={ApplicationAdminUsers}
 onChange={(event)=> SetApplicationAdminUsers(event.target.value)}  
 className="multi-input-padding"
 validators={["required"]}
 errorMessages={["Select Application Admin"]}
 input={
   <OutlinedInput
      labelWidth={labelWidth}
      id="select-multiple-checkbox"
    />
  }
  MenuProps={MenuProps}
>

Answer 2

当您使用对象作为 material-ui Select 值时，您需要提供 'renderValue' 属性：

  renderValue={selected => selected.map(item => item.firstName).join(', ')}

你可以参考这个CodeSandbox例子

将初始值绑定到 material ui select

Binding initial value to material ui select

reactjs

material-ui