Javascript 如何在React JS中验证不正确时更改文本框的颜色

我有一个下面的Div，它由一个输入框组成

  return (
  <div class="textBoxContainer input-container">
      <div class="field textContainer">
        <input id={props.id} type={type} placeholder=' ' onChange={handleChange}
        onBlur={createValidator(type)} 
        className={textContainerClassDisabled.join(' ')} disabled={props.textContainerDisabled} />
        <label for={props.id}>{placeholder}</label>
        <span className={boxClass.join(' ')} onClick={showHide}>
          {type === 'input' ? 'Hide' : 'Show'}
        </span>
         <p>{isValid}</p> 
      </div>
  </div>
   )

以下是条件语句：

switch (type) {
    case 'email':
        return (e) => {
           email=e.target.value;
           //var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
           if(!emailReg.test(email)) {
            isValid=true;
            console.log("Please enter a valid email address");
           }
           else{
            isValid=false;
            console.log("Correct");
           }
         }

---

当isValid条件为true时，我无法动态更改文本框边框的颜色。

您可以将

isValid

作为道具传递给组件，然后有条件地将

.error

类添加到

类名={textContainerClassDisabled.join（“”）}

基于

的值isValid

您可以从“classnames”导入类名

从“classNames”导入类名

<div class="textBoxContainer input-container">
      <div class="field textContainer">
        <input id={props.id} type={type} placeholder=' ' onChange={handleChange}
        onBlur={createValidator(type)} 
        className={textContainerClassDisabled.join(' ')} disabled={props.textContainerDisabled} />
        <label for={props.id}>{placeholder}</label>
        <span className={classNames({type==="input" ? "your class":"else other class"})
onClick={showHide}>

         <p>{isValid}</p> 
      </div>
  </div>


{占位符}
{isValid}

您可以这样做，
className='textBoxContainer输入容器'

<div class="className">

如果您不想导入
类名
库，可以使用字符串模板和三元组来实现相同的功能：

<div className={`textBoxContainer input-container ${isValid? 'valid_class' : 'invalid_class'}`}>
      ...
</div>


...

旁注：当电子邮件无效时，您将isValid设置为true，这让我感到困惑。我会考虑把它转过来，这样就更容易阅读了。
 
谢谢，各位，我能把它分类。< /P>
const [isValid, setIsValid]=useState(true);

const wrongInput=(a)=>{
    setIsValid(a);
};

if(!emailReg.test(email)) {
    wrongInput(false);
    console.log("Please enter a valid email address");
}
else{
    wrongInput(true);
    console.log("Correct");
}

<div className={`textBoxContainer input-container ${isValid? '' : 'error'}`}>

const[isValid，setIsValid]=useState（true）；
常量错误输入=（a）=>{
setIsValid（a）；
};
如果（！emailReg.test（电子邮件））{
输入错误（错误）；
console.log（“请输入有效的电子邮件地址”）；
}
否则{
输入错误（真）；
控制台日志（“正确”）；
}
未定义样式即将出现
有效类
和
无效类
只是示例。您需要将它们更新为用于设置有效/无效div样式的类。我还注意到，在您的示例中，您使用的是
class
而不是
className
。您是否正在编写标题或HTML中暗示的React组件？如果是对我的知识做出反应，您需要使用
className
。我正在使用className和css类。问题是更改后的isValid值没有在此处更新${isValid
if(!emailReg.test(email)) {
        isValid=true;
        className += ' error';
        console.log("Please enter a valid email address");
       }
       else{
        isValid=false;
        className = 'textBoxContainer input-container';
        console.log("Correct");
       }

<div className={`textBoxContainer input-container ${isValid? 'valid_class' : 'invalid_class'}`}>
      ...
</div>

const [isValid, setIsValid]=useState(true);

const wrongInput=(a)=>{
    setIsValid(a);
};

if(!emailReg.test(email)) {
    wrongInput(false);
    console.log("Please enter a valid email address");
}
else{
    wrongInput(true);
    console.log("Correct");
}

<div className={`textBoxContainer input-container ${isValid? '' : 'error'}`}>