嘿，我对反应很陌生，我必须使用“onChange”进行表单验证，如果有效，则只有状态应该更改如何以正确的方式做到这一点？

如何解决嘿，我对反应很陌生，我必须使用“onChange”进行表单验证，如果有效，则只有状态应该更改如何以正确的方式做到这一点？

嘿，我对反应很陌生，我必须使用“onChange”进行表单验证，如果有效，则只有状态应该更改。如何以正确的方式做到这一点？ const [status,setStatus] = useState(false)

  const handleChange = (e) => {

   let isFieldValid = false;
  
   if (e.target.name === "user_email") {

    isFieldValid = /\d{1}/.test(e.target.value);
   
  }
  if (e.target.name === "user_name") {
  
  isFieldValid =(e.target.value  !== null) && ( e.target.value.trim() !== '');
  }

  if(e.target.name === 'message'){
 isFieldValid = e.target.value  !== null) && ( e.target.value.trim() !== '');
  }
 
  if(isFieldValid){
    setStatus(true);
  }else{
    setStatus(false);
  }

  };

解决方法

您好，您可以手动验证所有输入字段，但需要大量工作和代码管理，因此您可以使用以下 NPM 库代替手动编写验证表单的逻辑，这将有很大帮助

react-form-input-validation

react-validation（此库遵循您当前使用的确切方法）

react-form-validator-core

simple-react-validator

请试试这个。

const handleChange = (e) => {

   let isFieldValid = false;

   const {name,value} = e.target;
  
   if (name === "user_email") {
      isFieldValid = /\d{1}/.test(value);
   }

   if (name === "user_name" || name === 'message') {
     isFieldValid = value && (value.trim() !== '');
   }  

    setStatus(isFieldValid);
  };

你的代码是正确的，但我只是像这样重构了它。有用吗？

您也可以使用验证节点模块。

示例：

var validator = require('validator');

validator.isEmail('foo@bar.com'); //=> true