[英]How to validate a input field in react
我知道有很多關於驗證的文章,但是我還沒有找到解決方案。 我只有一個輸入文本並想對其進行驗證,但是沒有取得任何進展。 驗證必須起作用。 請幫助我或指導我。
var styles = { margin: '2em auto', width: '300px', height: '300px', backgroundColor: '#DD4814', color: '#ffffff', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-around' }; var inputs = { position: 'relative', bottom: '17%', left: '20%' } var btns = { position: 'relative', bottom: '7%' } var btn = { backgroundColor: '#ffffff', color: '#000000', borderColor: '#DEB887', borderRadius: '0.4em', cursor: 'pointer', margin: '0 1em', padding: '0.5em', display: 'inline-block' } class Timer extends React.Component { constructor (props) { super(props) this.state = {count: 0, customNumber: 0} } handleChange (e) { this.setState({ customNumber: e.target.value}); } componentWillUnmount () { clearInterval(this.timer) } tick () { if (this.state.customNumber) { this.setState({ count: (this.state.customNumber--) }) if (this.state.customNumber <= 0) { this.setState({ count: 0}) clearInterval(this.timer) this.setState( {disabled: !this.state.disabled} ) } } else { this.setState({count: (this.state.count + 1)}) } } display () { return ('0' + this.state.count % 100).slice(-2) } startTimer () { clearInterval(this.timer) this.timer = setInterval(this.tick.bind(this), 1000) this.setState( {disabled: !this.state.disabled} ) } stopTimer () { clearInterval(this.timer) } resetTimer () { clearInterval(this.timer) this.setState({count: 0}) this.setState( {disabled: !this.state.disabled} ) } render () { return ( <div style={styles} className='timer'> <h1 style={{fontSize: '4em'}}>{this.display()}</h1> <div className="input_text" style={inputs}> <label htmlFor="custom_number">Enter number to start timer</label> <input type="text" name="custom_number" id="custom_number" value={this.state.inputValue} onChange={this.handleChange.bind(this)} disabled = {(this.state.disabled)? "disabled" : ""} placeholder="Enter b/w 1-100" /> </div> <div style={btns} className="buttons"> <button style={btn} type="button" name="start_btn" id="start_btn" onClick={this.startTimer.bind(this)}>Start</button> <button style={btn} type="button" name="stop_btn" id="stop_btn" onClick={this.stopTimer.bind(this)}>Pause</button> <button style={btn} type="button" name="reset_btn" id="reset_btn" onClick={this.resetTimer.bind(this)}>Stop</button> </div> </div> ) } } ReactDOM.render(<Timer />, document.getElementById('root') )
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>
您的情況下的簡單驗證示例:
class Timer extends React.Component {
constructor (props) {
super(props)
this.state = {count: 0, customNumber: 0, error: {}}
}
handleChange (e) {
const error = {};
if(parseInt(e.target.value) === 'NaN') { // your validation rules here...
error.customNumber = { title: 'Custom number error!', msg: 'Something wrong with your input value' }
}
this.setState({ customNumber: e.target.value, error });
}
componentWillUnmount () {
clearInterval(this.timer)
}
tick () {
if (this.state.customNumber) {
this.setState({
count: (this.state.customNumber--)
})
if (this.state.customNumber <= 0) {
this.setState({ count: 0})
clearInterval(this.timer)
this.setState( {disabled: !this.state.disabled} )
}
} else {
this.setState({count: (this.state.count + 1)})
}
}
display () {
return ('0' + this.state.count % 100).slice(-2)
}
startTimer () {
clearInterval(this.timer)
this.timer = setInterval(this.tick.bind(this), 1000)
this.setState( {disabled: !this.state.disabled} )
}
stopTimer () {
clearInterval(this.timer)
}
resetTimer () {
clearInterval(this.timer)
this.setState({count: 0})
this.setState( {disabled: !this.state.disabled} )
}
render () {
const { error } = this.state;
return (
<div style={styles} className='timer'>
<h1 style={{fontSize: '4em'}}>{this.display()}</h1>
<div className={`input_text ${error.customNumber ? 'has-error' : ''} `} style={inputs}>
<label htmlFor="custom_number">Enter number to start timer</label>
<input type="text" name="custom_number" id="custom_number" value={this.state.inputValue} onChange={this.handleChange.bind(this)} disabled = {(this.state.disabled)? "disabled" : ""} placeholder="Enter b/w 1-100" />
</div>
<div style={btns} className="buttons" disabled={!isEmpty(error)}>
<button style={btn} type="button" name="start_btn" id="start_btn" onClick={this.startTimer.bind(this)}>Start</button>
<button style={btn} type="button" name="stop_btn" id="stop_btn" onClick={this.stopTimer.bind(this)}>Pause</button>
<button style={btn} type="button" name="reset_btn" id="reset_btn" onClick={this.resetTimer.bind(this)}>Stop</button>
</div>
</div>
)
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.