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' class 添加到 '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作為道具傳遞給您的組件，然后根據isValid的值有條件地將.error class 添加到className={textContainerClassDisabled.join(' ')}

Answer 2

您可以從 'classnames' 導入類名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 3

你可以這樣做，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 4

如果您不想導入classnames庫，則可以使用字符串模板和三元組來實現相同的目的：

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

旁注：當 email無效時，您將 isValid 設置為 true 讓我感到困惑。 我會考慮切換它，以便更容易閱讀。

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