带有 material-ui 的 React-hook-form 不会在 onBlur() 方法中保持值变化

问题描述

我是 react-hook-form 世界的新手。我正在尽我最大的努力去理解，但我仍然缺少一些东西。我需要欧比万的帮助！

问题来了：

我有一个输入编号，它使用 react-hook-form <Textfield> 组件内的 <Controller/ Material-ui 组件渲染。在这个输入上，我需要验证输入的数字应该在 16 到 99 之间。使用 Material-UI，您可以传递参数 inputProps={{min:16,max:99}} 来阻止本机输入上的数字！太棒了！

但是如果用户手动输入值呢？然后我也希望能够在 onBlur 验证方法中阻止它，这就是我所做的：

<TextField
      onBlur={(e) =>{
        const currentValue = Number(e.target.value);
        if (!(currentValue >= minAge && currentValue <= maxAge)) {
            e.target.value = String(minAge);
            ref.current.value = String(minAge);
        }
        onBlur();
        console.log('TextField onBlur(): ',e.target.value);
      }}
      inputRef={ref}

      inputProps={{
        min:minAge,max:maxAge
      }}
/>

但是，当我在模糊后记录该值时，它告诉我没有任何变化。请帮忙。

这是完整的文件：

import React,{useEffect} from "react";
import { TextField } from "@material-ui/core";
import { Controller,useFormContext } from "react-hook-form";
import { ErrorMessage } from "@hookform/error-message";
import { ErrorMessageContainer } from "./ErrorMessageContainer";
import { FieldWrapper } from "./FieldWrapper";

interface AgeTextBoxProps {
  name: string;
  label?: string;
}

export const AgeTextBox = ({ name,label }: AgeTextBoxProps) => {
  const { errors,control } = useFormContext();
  const minAge = 16;
  const maxAge = 99

  return (
    <FieldWrapper caption={label}>
      <Controller
        name={name}
        control={control}
        rules={{
          required: { value: true,message: `You must enter the ${label} age` },min: { value: minAge,message: `The ${label} age cannot be lower than 16` },max: { value: maxAge,message: `The ${label} age cannot be higher than 99` }
        }}
        render={({ onChange,onBlur,value,ref }) => (
          <TextField
            onChange={(e) => onChange(e.target.value)}
            onBlur={(e) =>{
              const currentValue = Number(e.target.value);
              if (!(currentValue >= minAge && currentValue <= maxAge)) {
                  e.target.value = String(minAge);
                  ref.current.value = String(minAge);
              }
              onBlur();
              console.log('TextField onBlur(): ',e.target.value);
            }}
            onFocus={(event) => {
                event.target.select();
            }}
            inputRef={ref}
            value={value || 0}
            error={errors[name] ? true: false}

            role={"textBox"}
            variant="outlined"
            type={"number"}

            inputProps={{
              min:minAge,max:maxAge
            }}
          />
        )}
      />

      <ErrorMessage
        errors={errors}
        name={name}
        as={<ErrorMessageContainer />}
      />
    </FieldWrapper>
  );
};

export default AgeTextBox;

这里还有一个代码和框链接： https://codesandbox.io/s/eloquent-ishizaka-980qb?file=/src/AgeTextBox.tsx

解决方法

这是我为您所做的。可能你想要这种行为。

我刚刚在 onBlur 中调用了 onChange

onBlur={(e) => {
              const currentValue = Number(e.target.value);
              if (currentValue < minAge || currentValue > maxAge) {
                onChange(String(minAge));
              } else {
                onChange(e.target.value);
              }
              onBlur();
              console.log("TextField onBlur(): ",e.target.value);
            }}

https://codesandbox.io/s/modest-archimedes-6c1nl?file=/src/AgeTextBox.tsx