Reactjs react hook form material ui下拉字段缺少'name'属性： const角色=[ {值：“员工”，标签：“员工”}， {值：“管理员”，标签：“管理员”}， {值：“管理”，标签：“经理”}， {值：“超级”，标签：“主管”}， {值：“其他”，标签：“其他”} ] {roles.map（role=>( {role.label} ))} name=“角色”

我得到下拉列表的值{node:input，value:“MANAG”，focus:ƒ} 错误：字段缺少

名称

属性： 缺少“角色”的名称属性如何分配角色属性的名称？

查看文档：

Controller

负责注册过程，因此您无需再次在输入级别注册

const roles = [
  { value: "STAFF", label: "Staff" },
  { value: "ADMIN", label: "Administrator" },
  { value: "MANAG", label: "Manager" },
  { value: "SUPER", label: "Supervisor" },
  { value: "OTHER", label: "Other" }
]

<Controller as={<TextField />} className={classes.textField} select label="Select Role" 
name="role" variant="outlined" required control={control} fullWidth inputRef={register({ 
required: true })}>
  {roles.map(role => (
    <MenuItem key={role.value} value={role.value}>
      {role.label}
    </MenuItem>
  ))}
  name="role"
</Controller>

(
onChange（e.target.checked）}
选中={value}
/>
)}
/>
} />

您可以尝试设置

inputRef={ref}

Controller

的

render

提供了一个

ref

属性

<Controller
  control={control} 
  name="test" 
  render={({ onChange, onBlur, value }) => (
    <Checkbox
      onBlur={onBlur}
      onChange={e => onChange(e.target.checked)}
      checked={value}
    />
  )}
/>
<Controller render={props => <Input {...props} />} />

{
返回(
onChange（event.target.value）}
>
男性
女性
其他
);
}}
/>

<Controller
  name={'gender'}
  control={control}
  render={({ onChange, value, ref }) => {
    return (
      <Select
        inputRef={ref}
        label="Gender"
        defaultValue=""
        value={value}
        onChange={(event) => onChange(event.target.value)}
      >
        <MenuItem value="" />
        <MenuItem value="male">Male</MenuItem>
        <MenuItem value="female">Female</MenuItem>
        <MenuItem value="other">Other</MenuItem>
      </Select>
    );
  }}
/>