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

【问题标题】：How to change color of Text Box when validation is incorrect in React JSReact JS中验证不正确时如何更改文本框的颜色
【发布时间】：2026-01-02 00:30:01
【问题描述】：

我有一个下面的 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>
   )

我想将 'error' 类添加到 'div class="textBoxContainer input-container">'

.error {
    border:2px solid red;
}

下面是条件语句：

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");
           }
         }

地点：

 let isValid=false;
 type=email;

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

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

您可以将isValid 作为prop 传递给组件，然后根据isValid 的值有条件地将.error 类添加到className={textContainerClassDisabled.join(' ')}

【讨论】：

【解决方案2】：

您可以从“类名”导入类名 import classNames from '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>

【讨论】：

【解决方案3】：

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

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

附注：当电子邮件无效时，您将 isValid 设置为 true，这让我感到困惑。我会考虑换掉它，这样更容易阅读。

【讨论】：

valid_class 和 invalid_class 只是示例。您需要将它们更新为用于设置有效/无效 div 样式的类。我还注意到在您的示例中您使用的是class 而不是className。您是在编写标题或 HTML 中暗示的 React 组件吗？如果它是我所知道的反应，你需要使用className。
我正在使用 className 和我的 css 类。问题是更改的 isValid 值没有更新 ${isValid?这里

【解决方案4】：

谢谢大家，我可以解决了。

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'}`}>

【讨论】：

【解决方案5】：

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

<div class="className">

和切换部分，

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");
       }

【讨论】：

样式未定义即将到来