Question

我一直在寻找正确的方法来对某些Material UI组件使用React Hook Form。我可以将其与简单的文本字段一起使用，但是对于嵌套组件，我无法弄清楚。

具体来说，我尝试使用子MenuItems在Select组件中提交来自选择项的数据。

请参阅代码中的注释：

export default function NewGoalPane() {
const classes = useStyles();
const {register, handleSubmit} = useForm(); 

return (
  <div className={classes.root}>
    <CssBaseline />
    <form noValidate onSubmit={handleSubmit((data) => alert(JSON.stringify(data)))}>
      <main className={classes.content}>
        <div className={classes.text_field_section}>

          //This text field works and React Hook Form reads the data correctly.
          <TextField
            label="Goal Title"
            name="goalTitle"
            defaultValue=""
            inputRef={register}/>
        </div>

        //This Select component does not read the data from the selection of the MenuItems.
        <div className={classes.section}>
          <Select
            label="Repeating"
            name="repeating"
            defaultValue={true}
            inputRef={register} // Here I call register like all the React Hook Form docs say
          >
            <MenuItem value={true}>Yes</MenuItem>
            <MenuItem value={false}>No</MenuItem>
          </Select>
        </div>
      </main>
    </form>
  </div>
);

}

如何修复Select组件，以便React Hook Form收集表单提交中的数据？

Answer 1

我发现 Material UI 的 TextField 很简单，因为它需要的代码更少，而且您可以避免使用控制器和 Select 组件。这是我的解决方案。

<TextField
  select
  name: 'city'
  inputRef={register({ required: true })}
  onChange={e => setValue('city', e.target.value, {shouldValidate: true})}
  label="City"
  defaultValue="">
  {cityList.map((option, index) => (
    <MenuItem key={index} value={option}>
      {option}
    </MenuItem>
  ))}
</TextField>

{errors.city && <ErrorText>City is required</ErrorText>}

Answer 2

如果您使用的是 v7，最好的方法是为 Material Ui 组件使用控制器

import { useForm, Controller } from 'react-hook-form';


//component

const methods = useForm();
const { control } = methods;

<Controller
  name="city"
  control={control}
  defaultValue=""
  rules={{ required: 'City Required' }}
  render={({ field: { onChange, value } }) => (
        <TextField
          fullWidth
          label="City"
          variant="outlined"
          value={value}
          onChange={onChange}
        />
      )}
 />

将React Hook表单与Material UI Select组件一起使用

2 个答案: