ReactJS中的輸入驗證setTimeout

Question

我有一個組件根據輸入是否有效使用className="error"或classname=""進行渲染。這種方式在CSS中我可以簡單地做.error { background: red; }。輸入的有效性由isValidNumber(..)函數確定。但是，現在我遇到的問題是驗證是太瞬時。如果輸入無效，它幾乎立即呈現「錯誤」類名，這是一個令人討厭的用戶體驗問題。我希望有一些延遲，讓班級不會立即「出錯」，比如0.5秒就好。

Demo of component。輸入在「23億」，「1萬億」或「203239123」等事物上有效，但不是「2羊」或「山」。 Github Repo

這是我的組件到目前爲止。您可以看到，我試圖使用setTimeout和setState({ isValid: isValid })作爲函數，只要isValid爲false。

export default class NumberInput extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      value: "", 
      isValid: false 
     }; 
    } 
    setIsValid(isValid) { 
     this.setState({ isValid: isValid }) 
    } 
    handleChange(event) { 
     var value = event.target.value 
     this.setState({ value: event.target.value }) 

     var isValid = isValidNumber(value) 
     if (isValid === false) { 
      setTimeout(this.setIsValid(isValid), 2000); 
     } else { 
      this.setIsValid(isValid) 
     } 
    } 
    getClassName() { 
     var className = '' 
     var errorClass = '' 

     // Generate error classes based on input validity. 
     if (this.state.isValid) { 
      errorClass = '' 
     } else { 
      errorClass = 'error' 
     } 

     className = 'number-input ' + errorClass 
     return className 
    } 
    render() { 
     return (
      <div> 
       <input type="text" className={this.getClassName()} value={this.state.value} onChange={this.handleChange.bind(this)} placeholder="Enter a number"/> 
       <RawNumber isValid={this.state.isValid} value={this.state.value} /> 
      </div> 
     ) 
    } 
} 

Answer 1

您需要修改下面的代碼行：

if (isValid === false) { 
    setTimeout(this.setIsValid(isValid), 2000); 
} 

，你在這裏做什麼，你基本上調用this.setIsValid瞬間和傳遞給setTimeout的它的結果。所以國家立即改變了。

你想做什麼，你想傳遞setTimeout函數本身，而不是結果。要做到這一點，你想換this.setIsValid到函數的包裝，像這樣：

if (isValid === false) { 
    setTimeout((function() { 
     this.setIsValid(isValid); 
    }).bind(this), 2000); 
} 

Answer 2

我只想爲background-color屬性添加過渡到.error類。

.error { 
    background-color: red; 
    transition: background-color .5s ease; 
} 

如果你想延遲轉換，你可以在聲明的最後加上一個值。以下將延遲1秒的過渡：

​​

我剛剛重讀你的問題。如果您想要在JS中執行延遲或代替CSS，則需要將您的handleChange方法更改爲以下內容。

handleChange(event) { 
    var value = event.target.value 
    this.setState({ value: event.target.value }) 

    var isValid = isValidNumber(value) 
    if (isValid === false) { 
     setTimeout(this.setIsValid.bind(this, isValid), 2000); 
    } else { 
     this.setIsValid(isValid) 
    } 
}