Question

我在我的React应用程序中使用物料ui。我正在使用选择组件。我想将一些初始值绑定到选择控件。我曾尝试过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>

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

Answer 1

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

您还没有处理过onChange来更新数组以添加/删除项目。

作为一个简单的例子。

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选择值时，需要提供“ renderValue”属性：

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

您可以参考此CodeSandbox示例

将初始值绑定到物料ui选择

2 个答案: