@material-ui/core 中的 TextField 作为函数传递

Question

我正在尝试将 TextField 从 material-ui 传递到 react-hook-form 控制器，但它作为函数返回。导入 prop-types 和 requiring 对象失败。

import React from 'react';
import { useFormContext, Controller } from 'react-hook-form';
import { TextField, Grid } from '@material-ui/core';

function FormInput({ name, label, required }) {
  const { control } = useFormContext();
  const isError = false;

  return (
    <Grid item xs={12} sm={6}>
      <Controller
        as={TextField}
        name={name}
        control={control}
        label={label}
        fullWidth
        required={required}
        error={isError}
      />
    </Grid>
  );
}

export default FormInput;

Answer 1

首先 as prop 已弃用，请考虑使用 render prop 或 useController hook。它不起作用，因为 ref.

有问题

这是一个没有控制器的工作示例：React Hook Form V7 - MUI TextField

这里有 useController 钩子：React Hook Form V7 - MUI TextField useController

您可以在此处找到有关 useController 的文档：https://react-hook-form.com/api/usecontroller

@material-ui/core 中的 TextField 作为函数传递

TextField from @material-ui/core passing as a function

javascript

react-hook-form