相关疑难解决方法(0)

最新的react-hook-form错误处理与material-ui TextField

我在使用react-hook-form 和material-ui 时遇到了困难。

我准备了一个codesandbox示例

import { TextField } from "@material-ui/core";
import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css";

interface IMyForm {
  vasarlo: string;
}

export default function App() {
  const {
    handleSubmit,
    formState: { errors },
    register
  } = useForm<IMyForm>();

  const onSubmit = (data: IMyForm) => {
    alert(JSON.stringify(data));
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>First Name</label>
      <TextField
        variant="outlined"
        margin="none"
        label="Test"
        {...register("vasarlo", {
          required: "error text"
        })}
        error={errors?.vasarlo ? true : false}
        helperText={errors?.vasarlo ? errors.vasarlo.message : …
Run Code Online (Sandbox Code Playgroud)

reactjs material-ui react-hook-form

9
推荐指数
1
解决办法
1万
查看次数

标签 统计

material-ui ×1

react-hook-form ×1

reactjs ×1