如何使用 useRef() 进行验证

Posted 2023-02-25

【中文标题】如何使用 useRef() 进行验证

【英文标题】：How to do validation using useRef()

【发布时间】：2021-07-12 07:43:36

【问题描述】：

如何使用 useRef 验证输入框值。

一旦用户点击输入框并出来，则不需要初始验证，然后它应该验证输入框是否为空，它应该显示输入框不能为空。

Codesandbox Link

我试过的代码。使用 onBlur

export default function App() 
  const name = React.useRef("");

  const nameBlurData = (name) => 
    console.log("name", name);
  ;

  return (
    <div className="App">
      <form>
        <input
          onBlur=() => nameBlurData(name.current.value)
          type="text"
          ref=name
          placeholder="Enter First Name"
        />

// show error message here
      </form>
    </div>
  );

【问题讨论】：

你为什么在这里使用ref？

我不明白你的问题。你需要某种状态来实现你想要的功能（即根据输入的有效性渲染一些东西），为什么要使用useRef？

【参考方案1】：

您可以使用本地状态并有条件地呈现如下错误消息：

  const [isValid, setIsValid] = useState(true)

  const nameBlurData = (name) => 
     setIsValid(!!name);
  ;

  return (
    <div className="App">
      <form>
        <input
          onBlur=() => nameBlurData(name.current.value)
          type="text"
          ref=name
          placeholder="Enter First Name"
        />
        !isValid && <span> input must not be empty </span>  
      </form>

请注意，在这种情况下，您实际上并不需要 ref，您可以使用以下事件对象：

onBlur=(event) => nameBlurData(event.target.value)

【参考方案2】：

您需要使用useState 挂钩来更新name 属性的值。在这里使用ref 并不理想。

现场演示https://stackblitz.com/edit/react-apqj86?devtoolsheight=33&file=src/App.js

import React,  useState  from 'react';

export default function App() 
  const [name, setName] = useState('');
  const [hasError, setError] = useState(false);
  const nameBlurData = () => 
    if (name.trim() === '') 
      setError(true);
      return;
    
    setError(false);
  ;

  return (
    <div className="App">
      <form>
        <input
          onBlur=nameBlurData
          type="text"
          value=name
          onChange=e => setName(e.target.value)
          placeholder="Enter First Name"
        />

        hasError ? <p style= color: 'red' >Name is required</p> : null
      </form>
    </div>
  );

【参考方案3】：

您可以使用“useRef”来验证输入字段的值。 无需使用“useState”。

下面的代码是OP的问题的基本实现

您可以将“console.log”替换为您的警报组件。

import  useRef  from "react";

const ComponentA = () => 
   const emailRef = useRef(null);
   const passwordRef = useRef(null);

   const onBlurHandler = (refInput) => 
      if (refInput.current?.value === "") 
         console.log(`$refInput.current.name is empty!`);
        
   

return (
   <form>
      <input ref=emailRef onBlue=onBlurHandler.bind(this, emailRef) />
      <input ref=passwordRef onBlue=onBlurHandler.bind(this, passwordRef) /> 
   <form/>
 )

链接到"useRef"

注意：未经测试，代码直接输入到 SO 的 RTE