如何将MUI Select与Reaction-Hook-Form一起使用？

问题描述

我已经使用MUI在Reaction中构建了一个表单，并在Reaction Hook表单中构建了一个表单。我正在尝试创建一个自定义TextField元素，该元素用作Select Input。我希望它是具有Ref道具的不受控制的组件。我已尝试将inputRef属性作为MUI和Reaction Hook窗体文档的建议传递，但没有成功。

            <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道具，但也不起作用。

推荐答案

使用带有Reaction钩子窗体的Material-UI中选择组件需要使用控制器实现自定义逻辑https://react-hook-form.com/api#Controller

以下是一个可重用组件，有望简化代码，以便在您的应用程序中使用该Select组件：

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;

您可以在您的应用程序中使用它，如下所示：

           <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：

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

这篇关于如何将MUI Select与Reaction-Hook-Form一起使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！