reactjs - react-hook-form material-ui 下拉字段缺少 `name` 属性 :

Question

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>

我得到下拉列表的值 {node: input, value: "MANAG", focus: ƒ}
错误:字段丢失 name属性:
缺少“角色”的名称属性 如何分配角色属性的名称？

Answer 1

看一下文档:
https://react-hook-form.com/api#ControllerController负责注册过程，因此您无需 register再次处于输入级别。

<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} />} />