即使我设置了回调 function

Question

I am trying to validate a form with two inputs. If each input has at least a character or more, the button should be enabled. The problem here is that the state is always one step behind. I handled validation in the callback but it still didnt solve the problem. Please help anyone!

state = {
    name : '',
    nameIsValid: false,
    zip : '',
    zipIsValid: false,
    allIsValid: false
  }
handleChange = (event) => {
    this.setState({
      [event.target.name] : event.target.value,
    }, ()=>this.handleValidation())
  }
handleValidation = () => {
    if(this.state.name.length > 0){
      this.setState({nameIsValid : true})
    } else {
      this.setState({nameIsValid: false})
    }

    if(this.state.zip.length > 0){
      this.setState({zipIsValid : true})
    } else {
      this.setState({zipIsValid: false})
    }

    if(this.state.nameIsValid && this.state.zipIsValid){
      this.setState({allIsValid: true})
    }
  }
render() {
    return (
      <div>
        Name: <input name="name" onChange={this.handleChange} value={this.state.name}/><br />
        Zip: <input name="zip" onChange={this.handleChange} value={this.state.zip}/><br />
        <button disabled={!this.state.allIsValid}>Proceed</button>
      </div>
    )
  }

Answer 1

state = {
   name: '',
   zip: ''
 }



handleChange = event => {
  this.setState({
     [event.target.name]: event.target.value
  });
}

validateForm = () => {
  return this.state.name.length > 0 && this.state.zip.length > 0;
}

<button disabled={!this.validateForm()}>Proceed</button>

Answer 2

I think it's down to the multiple setStates you're using. You can actually make your code a little more concise and make this work at the same time.

 class App extends React.Component { state = { name: '', nameIsValid: false, zip: '', zipIsValid: false, allIsValid: false }; handleChange = (event) => { // Destructure the name and value from the target const { target: { name, value } } = event; this.setState({ // Set only that changed input valid property to true or false // depending on whether it has length [`${name}IsValid`]: value.length > 0 || false, [name]: value }, this.validate); } validate = () => { // Then just set the allIsValid property based on the // whether the other properties are both true this.setState((state) => ({ allIsValid: state.nameIsValid && state.zipIsValid })); } render() { return ( <div> Name: <input name="name" onChange={this.handleChange} value={this.state.name}/> <br /> Zip: <input name="zip" onChange={this.handleChange} value={this.state.zip} /> <br /> <button disabled={.this.state.allIsValid}>Proceed</button> </div> ) } } ReactDOM,render( <App />. document;getElementById('root') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>