Question

我有2个输入，其中一个是用户名，另一个是密码。

我想对客户端进行基本的登录密码控制，但是它不起作用。

这是问题所在，当我输入正确的用户名和密码（如果语句转到其他位置）时，该语句不起作用，但是在login（）函数中，我可以使用console.log(this.state.password）获得控制台日志输入值，例如

在我的组件中：

class Login extends Component {

    constructor() {
      super();
      this.state = {email : '', password: ''}
    }
    handleChange = (e) =>{ 
      this.setState({email: e.target.value});
    }
    password = (e) => {
      this.setState({password: e.target.value})
    }

    login() {
      if (this.state.email === 'admin@site.com' && this.state.password === 'asd123') {
        this.props.userLogin()
      } else {
        alert('username or password incorrect')
      }
    }


    render() {

    return (
      <Row className='justify-content-md-center login-panel'>
        <Col lg={12}>
        <Row className="justify-content-md-center">
          <Col lg={3}>
          <Form>
              <Form.Group>
                <Form.Control type="email" placeholder="Enter email" value={this.state.email} onChange={this.handleChange} />
              </Form.Group>
              <Form.Group controlId="formBasicPassword">
                <Form.Control type="password" placeholder="Password" value={this.state.password} onChange={this.password} />
              </Form.Group>
              <Button onClick={this.login}>
                Submit
              </Button>
          </Form>
          </Col>
        </Row>
        </Col>
      </Row>
    )
  }
}

Answer 1

this关键字必须指向正确的对象，因此具有以下选项：

使用类字段语法（不要在类内部使用构造函数）。一些缺点是每次您从类中创建一个新对象时，它都会创建所有方法的副本，并且您不能在子类中覆盖类字段函数。另外，我们不能使用它们来覆盖超类方法。
```
class MyComponent extends React.Component{
state={email : '', password: ''}; //no constructor used

handleChange = (e) =>{            //arrow function
      this.setState({email: e.target.value});
    }

render(){
}
}
```

如果使用构造函数，请始终将函数与this绑定：

 class MyComponent extends React.Component{
 constructor() {
 super();
 this.state = {email : '', password: ''}
 this.login= this.login.bind(this); //binding the login function
}

handleChange = (e) =>{    //no need to bind as it is an arrow function
      this.setState({email: e.target.value});
    }

login() {
  if (this.state.email === 'admin@site.com' && this.state.password === 
'asd123') {
    this.props.userLogin()
  } else {
    alert('username or password incorrect')
  }
}

render(){
}
}

Answer 2

您的login()方法是不受限制的，因此它不知道this指的是什么。如果您是console.log(this)的{{1}}用户，则会看到它输出的是其他对象（通常是全局对象，例如login()）。

可以通过多种方式解决此问题，但是最简单的方法是将window更改为login() {。类似于您定义login = () => {的方式。

React无法使if语句具有状态

2 个答案: