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

Question

我有一个下面的 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 条件为真时，我无法动态更改文本框边框的颜色。

Answer 1

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

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

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

Answer 2

你可以这样做，className = 'textBoxContainer input-container'

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

Answer 3

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

Answer 4

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

Answer 5

谢谢大家，我可以整理一下了。

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