React + material-ui + react-hook-form实现react表单控制

最新推荐文章于 2024-10-02 06:18:39 发布

Joey_Tribiani

最新推荐文章于 2024-10-02 06:18:39 发布

阅读量1.9k

点赞数

分类专栏：前端学习笔记和总结文章标签： react.js materialdesign 前端 js

本文链接：https://blog.csdn.net/Joey_Tribiani/article/details/120065223

版权

前端学习笔记和总结专栏收录该内容

62 篇文章

订阅专栏

该博客展示了如何结合React、Material-UI库和react-hook-form来创建并控制自定义的输入和选择字段。通过`useForm`和`useImperativeHandle`等React Hooks，实现了表单的验证和提交功能。InputField和SelectField组件分别定制了输入框和下拉选择，提供错误提示和必填项验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React + material-ui + react-hook-form实现react表单控制

CustomForm.jsx

import React from "react";
import { FormControl } from "@material-ui/core";
import { useForm } from "react-hook-form";
import { InputField, SelectField } from "./FormFields";

export default React.forwardRef((props, ref) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  React.useImperativeHandle(ref, () => ({
    handleSubmit,
  }));

  return (
    <form ref={ref}>
      <FormControl fullWidth>
        <InputField
          error={Boolean(errors.lastName)}
          {...register("lastName", { required: true })}
          error-text={"this item is requiredsss"}
        >
          Name
        </InputField>
      </FormControl>
      <FormControl fullWidth>
        <SelectField
          error={Boolean(errors.firstName)}
          {...register("firstName", { required: true })}
          error-text={"this item is required"}
        >
          First Name
        </SelectField>
      </FormControl>
    </form>
  );
});

FormFields.jsx

import {
  InputLabel,
  FormHelperText,
  Input,
  Select,
  MenuItem,
} from "@material-ui/core";
import { useState, forwardRef } from "react";

export const InputField = forwardRef((props, ref) => {
  return (
    <div style={{ height: 66 }} ref={ref}>
      <InputLabel
        required={props.required === false ? false : true}
        error={props.error}
      >
        {props.children}
      </InputLabel>
      <Input fullWidth {...props} />
      {props.error ? (
        <FormHelperText error={props.error} id="my-helper-text">
          {props["error-text"] || "this item is required"}
        </FormHelperText>
      ) : (
        " "
      )}
    </div>
  );
});

export const SelectField = forwardRef((props, ref) => {
  const [value, setValue] = useState("");

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const error = props.error && value === "";

  return (
    <div style={{ height: 66 }} ref={ref}>
      <InputLabel
        required={props.required === false ? false : true}
        error={error}
      >
        {props.children}
      </InputLabel>
      <Select
        {...props}
        error={error}
        fullWidth
        value={value}
        onChange={handleChange}
      >
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
      {error ? (
        <FormHelperText error={error} id="my-helper-text">
          {props["error-text"] || "this item is required"}
        </FormHelperText>
      ) : (
        " "
      )}
    </div>
  );
});