Material UI 自定义 TextField 不适用于 Yup

Question

我正在尝试在我的 RegisterForm 中使用我的自定义 TextField 和 Yup，但他没有工作。我一直有一条消息“⚠ Champ obligatoire”。单击提交后，我不明白为什么，但只需简单输入即可。

注册页面.js

import React, { useRef } from "react";

import { useForm } from "react-hook-form";

import Button from "../../lib/Button";

import TextField from "../../lib/TextField";

import * as yup from "yup";

const SignupSchema = yup.object().shape({

  firstName: yup.string().required("⚠ Champ obligatoire."),

});

export default function Home() {

  const { register, handleSubmit, errors, watch } = useForm({

    validationSchema: SignupSchema,

  });

  const onSubmit = (data) => console.log(data);

  console.log(errors);

  return (

    <div style={styles.inputForm}>

      <p>Inscription</p>

      <form style={{ marginTop: "40%" }} onSubmit={handleSubmit(onSubmit)}>

        <label style={styles.label} htmlFor="firstName">

          Prénom

        </label>

        <TextField

          style={styles.input}

          name="firstName"

          placeholder="Toto"

          type="text"

          ref={register}

        />

        <br />

        {errors.firstName && (

          <p style={styles.error}>{errors.firstName.message}</p>

        )}

        <br />

        <Button

          style={{ marginTop: 10 }}

          type="submit"

          onClick={handleSubmit(onSubmit)}>

          Termine ton incription

        </Button>

      </form>

    </div>

  );

}

我的自定义文本字段

CustomTextfield.js

import React from "react";

import PropTypes from "prop-types";

import TextField from "@material-ui/core/TextField";

function CustomField({ InputLabelProps = {}, ...props }) {

  return (

    <TextField

      InputLabelProps={{ shrink: true, ...InputLabelProps }}

      {...props}

    />

  );

}

CustomField.propTypes = {

  classes: PropTypes.object.isRequired,

};

export default CustomField;

提前致谢！

Answer 1

您需要使用inputRef而不是refon TextField。ref将应用于将由;div呈现的最外层元素 FormControl这对 yup 集成没有任何帮助。inputRef将 ref 转发给input元素。&nbsp; &nbsp; &nbsp; &nbsp; <TextField&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={styles.input}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="firstName"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="Toto"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputRef={register}&nbsp; &nbsp; &nbsp; &nbsp; />编辑材质 UI - 自定义文本字段（组合）相关文档：https ://material-ui.com/api/text-field/#props