Question

我知道有很多关于验证的文章，但我没有找到任何解决方案。我只有一个输入文本，想要验证它，但没有取得任何进展。验证必须做出反应。请帮我制作或指导我。

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>

Answer 1

您案例中的简单验证示例：

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

如何验证反应中的输入字段

1 个答案: