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>
   )

我想将“错误”类添加到“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

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

的值