Блог

Я использую форму реакции-крючка v6(6.13.1). Я использовал a, потому что мне нужно было проверить значения в реальном времени.

 /* eslint-disable eqeqeq */
import React, { useEffect, useState } from "react";
import { Controller } from "react-hook-form";

function InputMasking({ label, value, name, control }) {
  const [maskValue, setMaskValue] = useState("");

  const maskingChange = (e) => {
    setMaskValue(e.target.value);
  };

  // validate from value real time
  useEffect(() => {
    if (name == "ipAddr") {
      setMaskValue(maskValue.replace(/[^0-9.]/g, ""));
    }

    if (name == "macAddr") {
      setMaskValue(maskValue.replace(/([^0-9A-Fa-f:])/g, ""));
    }
  }, [name, value, maskValue]);

  return (
    <div>
      <label>{label}</label>
      <>
        <Controller
          name={name}
          control={control}
          defaultValue={value ? value : maskValue}
          render={
            () => (
              <input name={name} value={maskValue} onChange={maskingChange} />
            )
            // value ? (
            //   <input name={name} key={value} defaultValue={value} />
            // ) : (
            //   <input name={name} value={maskValue} onChange={maskingChange} />
            // )
          }
        />
      </>
    </div>
  );
}

export default InputMasking;
 

App.js

 import { Controller, useForm } from "react-hook-form"; 
import InputMasking from "./InputMasking";
import "./styles.css";

export default function App() {
  const { handleSubmit, control } = useForm();
  return (
    <div className="App">
      <form onSubmit={handleSubmit((data) => console.log(data))}>
        {/* This component is return "" */}
        <InputMasking
          label="Controller render"
          name="macAddr"
          control={control}
        />
        <button type="submit">submit</button>
      </form>
    </div>
  );
}
 

Этот компонент не является отправкой. Значение по умолчанию обычно возвращается, но значение, введенное после этого, не было передано. Поэтому я использовал метод as() вместо метода render (), однако этот метод не работает.
Вы можете проверить почтовый ящик здесь: https://codesandbox.io/s/vigorous-kowalevski-850ko

Как можно использовать проверку в реальном времени с помощью формы react-hook? Я был бы признателен, если бы вы могли дать мне ответ. (Извините за неуклюжий английский.)