javascript - 如何在 ReactJS 中创建一个包含所有验证和错误处理的通用文本框？

Question

我有一个输入文本框，我正在从我的道具中设置“类型”。我需要帮助来根据道具对此文本框进行验证/错误处理。例如。如果 props 中的 type=email，则应对其应用 EMail 验证。以下是我当前的代码：

import React, { useState, useEffect } from 'react';
import { runInContext } from 'vm';
import PropTypes from 'prop-types';

const TextBox=(props)=> {
  const [type, setType] = useState('text');
  const [placeholder, setPlaceholder] = useState('Enter Text');
  const [passValue, setPassValue] = useState(); 

  useEffect(() => {
    setType(props.type);
    setPlaceholder(props.placeholder);
  }, []);

  const boxClass = ["box"];
  const textContainerClassDisabled = ["textContainer"];  
  const handleChange=(e)=>{
    setPassValue(e.target.value);
  }

  const showHide=(e)=>{
    e.preventDefault();
    e.stopPropagation();
    setType(
      type === 'input' ? 'password' : 'input'
     ) 
   };

   return (
   <div>
     {
       (type==='password' || type=== 'input') && boxClass.push('green') && 
       <p></p>
     }

    {(type==='text')&&<p></p>}
    {(type==='email')&&<p></p>}
    {
      (props.textContainerDisabled === true) && textContainerClassDisabled.push('textContainer-disabled') &&
      <p></p>   
    }

    <div class="textBoxContainer input-container">    
      <input class='textContainer'
        type={type} placeholder={placeholder} onChange={handleChange} 
        className={textContainerClassDisabled.join(' ')} disabled={props.textContainerDisabled}/>

      <span className={boxClass.join(' ')} onClick={showHide}>
        {type === 'input' ? 'Hide' : 'Show'}
      </span>
    </div>
  </div>
 );
}

 TextBox.defaultProps = {
  type: "text", 
  placeholder: "Enter your Text",
  boxDisabled:false
 }
 export default TextBox; 

标签： javascripthtmlreactjs

Answer 1

这是一个可用于您的react-hooks应用程序的简单库： react-hooks-validation。

您可以使用其他库来代替。这些将使您的代码中的工作更容易和更清洁！