代码之家 › 专栏 › 技术社区 › jared-nelsen

在材质UI选择组件中使用React钩子窗体

react-hook-form material-ui reactjs

0

jared-nelsen · 技术社区 · 4 年前

参见代码中的注释:

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表单收集表单提交中的数据?

0 回复 | 直到 4 年前

1

0

knigalye 4 年前

我发现materialui的TextField很简单,因为它需要更少的代码,而且您可以避免使用controller和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>}