如何在React Hook表单中使用Material-UI Select

问题描述：

我已经使用MUI和React Hook Form在React中构建了一个表单.我正在尝试创建一个自定义的 TextField 元素，该元素可用作 Select Input .我希望它是一个具有 Ref 道具的不受控制的组件.我尝试按照MUI和React Hook Form文档的建议传递inputRef道具，但没有成功.

I've built a form in React using MUI and React Hook Form. I'm trying to create a custom TextField element that works as a Select Input. I would like it to be an uncontrolled component with a Ref prop. I've tried to pass the inputRef prop as the MUI and React Hook Form docs recommend but with no success.

            <TextField
              id="id"
              name="name"
              select
              native="true"
              className={classes.textField}
              label="label"
              margin="normal"
              variant="outlined"
              inputRef={register({ required: "Choose one option" })}
              error={!!errors.name}
            >
              <MenuItem value="">Choose one option</MenuItem>
              <MenuItem value="3">03</MenuItem>
              <MenuItem value="6">06</MenuItem>
              <MenuItem value="9">09</MenuItem>
              <MenuItem value="12">12</MenuItem>
              <MenuItem value="16">16</MenuItem>
              <MenuItem value="18">18</MenuItem>
            </TextField>

我发现的一件事是，如果我将本机 select 与 ref 一起使用，则效果很好.
此外，我尝试将 inputRef 道具更改为 SelectProps 道具，但它也无法正常工作.

预先谢谢你.

One thing that i've found is that if i use the native select with ref, it works just fine.
Besides, i tried to change the inputRef prop to a SelectProps one but it didn't work too.

Thank you in advance.

答

在Material-ui中使用带有react hook形式的Select组件需要您使用Controller

Using Select component from Material-ui with react hook form need you to implement custom logic with a Controller https://react-hook-form.com/api#Controller

这是一个可重用的组件，有望简化代码以在您的应用中使用该Select组件:

Here is a reusable component that will hopefully simplify the code to use that Select component in your app:

import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Select from "@material-ui/core/Select";
import { Controller } from "react-hook-form";

const ReactHookFormSelect = ({
  name,
  label,
  control,
  defaultValue,
  children,
  ...props
}) => {
  const labelId = `${name}-label`;
  return (
    <FormControl {...props}>
      <InputLabel id={labelId}>{label}</InputLabel>
      <Controller
        as={
          <Select labelId={labelId} label={label}>
            {children}
          </Select>
        }
        name={name}
        control={control}
        defaultValue={defaultValue}
      />
    </FormControl>
  );
};
export default ReactHookFormSelect;

您可以像这样在应用程序中使用它:

You can use it in your app like this:

           <ReactHookFormSelect
              id="numero_prestacao"
              name="numero_prestacao"
              className={classes.textField}
              label="Em quantas parcelas?"
              control={control}
              defaultValue={numero_prestacao || ""}
              variant="outlined"
              margin="normal"
            >
              <MenuItem value="">Escolha uma opção</MenuItem>
              <MenuItem value="3">03 parcelas</MenuItem>
              <MenuItem value="6">06 parcelas</MenuItem>
              <MenuItem value="9">09 parcelas</MenuItem>
              <MenuItem value="12">12 parcelas</MenuItem>
              <MenuItem value="16">16 parcelas</MenuItem>
              <MenuItem value="18">18 parcelas</MenuItem>
            </ReactHookFormSelect>

这是您的codeSandBox使用此组件更新的信息窗体中的选择内容:

Here is your codeSandBox updated with this component for the selects in the Information form:

https://codesandbox.io/s/unit-multi-step-form-kgic4?file =/src/Register/Information.jsx:4406-5238

如何在React Hook表单中使用Material-UI Select

相关推荐