Question

我正在以编程方式验证用于简单登录的电子邮件和密码输入，这是调用验证电子邮件的其他功能的函数。

  handleLogin(event) {
    this.validateEmail();
    this.validatePassword();

    if (this.state.emailValid === 'error' || this.state.passwordValid === 'error') {
      alert('invalid form');
      return;
    };

    const email = ReactDOM.findDOMNode(this.refs.email).value;
    const password = ReactDOM.findDOMNode(this.refs.password).value;
    const creds = { email: email, password: password }
    this.props.onLoginClick(creds)
  }

请注意，首先我要调用validateEmail()函数来修改指示输入是否正确的商店，这里是validateEmail()源代码：

  validateEmail() {
    const email = ReactDOM.findDOMNode(this.refs.email).value;
    let validEmail = /^.+([.%+-_]\w+)*@\w+([.-]\w+)*\.\w+([-.]\w+)*$/.test(email);

    if (!validEmail) {
      this.setState({
        emailValid: 'error'
      });
      return;
    }
    this.setState({
      emailValid: 'success'
    });
  }

但是在if语句中，state.emailValid尚未更新，这是状态修改的延迟，因此不显示alert()。如何正确获取更新状态？

由于

Answer 1

这里要注意的是setState是异步的。在handleLogin方法中的所有其他同步完成之前，它不会更新状态。

使用React我喜欢尽可能多地使用状态作为单一的事实来源。在上面的示例中，您将html元素作为事实和状态的来源。通过将组件更改为由反应状态控制，您可以在每次击键时验证表单。

表格和受控制的组件

首先将输入状态保持在状态

class LoginForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      emailValid: true,
    };

    // we bind the function in case we want to 
    // control text in child component
    this.emailChange = this.handleEmailChange.bind(this);
  }

  emailChange(event) {
    this.setState({email: event.target.value});
  }

  render() {
    <textarea value={this.state.email} onChange={this.emailChange} /> 
  }
}

现在无论何时键入html输入的状态都会在react中处理。这将使您更容易检查其有效性。我们可以通过在我们的类中添加另一个方法来实现：

class LoginForm extends React.Component {

  // ...all the stuff from above

  validateEmail() {
    let validEmail = /^.+([.%+-_]\w+)*@\w+([.-]\w+)*\.\w+([-.]\w+)*$/.test(email);

    if (!validEmail) {
      // Object.assign just ensures immutability
      this.setState(Object.assign({}, this.state, {
        emailValid: false
      }))
    } else {
      // If using babel, this is ensure immutable also
      this.setState({
        ...state,
        emailValid: true
      })
    }
  }

  // or....

  validateEmail() {
    let validEmail = /^.+([.%+-_]\w+)*@\w+([.-]\w+)*\.\w+([-.]\w+)*$/.test(email);
    this.setState({...state, emailValid: validEmail})
  }

  // ...render method
}

现在每次按键都会进行验证。当您需要提交表单时，您需要做的就是检查状态数据是否有效并且不需要引用dom。您可以从州发送数据。

ReactJS状态是否有延迟修改？

1 个答案:

表格和受控制的组件