Question

我有一个用于“签名”页面的示例代码，如下所示：当我在文本字段中输入每个字符的用户名和密码时，将触发按钮的onClick事件，并且可以看到console.log（）的输出。为什么触发它？

class Signin extends React.Component {
  state = {
    username: null,
    password: null,
  }
  render () {
    const { t, classes } = this.props;
    return (
      <div >
        <div >
          <div >
            <Card>
              <CardContent>
                <form>
                  <TextField
                    inputProps={{ style:{fontSize:20, textAlign:'center', direction:'ltr'} }}
                    value={this.state.username}
                    onChange={e => this.setState({username: e.target.value})}
                    id="username"
                    label={t("Username")}
                    className={classes.textField}
                    fullWidth
                    margin="normal"
                  />
                  <TextField
                    inputProps={{ style:{fontSize:20, textAlign:'center', direction:'ltr'} }}
                    value={this.state.password}
                    onChange={e => this.setState({password: e.target.value})}
                    id="password"
                    label={t("Password")}
                    className={classes.textField}
                    type="password"
                    fullWidth
                    margin="normal"
                  />
                  <Button variant="raised" color="primary" fullWidth type="submit" onClick={console.log(this.state.username,this.state.password)} >{t("Login")}</Button>
                </form>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    );
  }
}

Answer 1

从以下位置更改您的console.log：

 onClick={console.log(this.state.username,this.state.password)}

在下面喜欢这个

 onClick={() => console.log(this.state.username,this.state.password)}

Answer 2

尝试一下之所以会这样，是因为这取决于您在哪里使用Arrow函数。如果在render方法中使用了Arrow函数，则每次调用render时，它们都会创建一个新实例，就像bind如何工作一样。

<Button 
variant="raised" 
color="primary" 
fullWidth type="submit" 
onClick={()=>{console.log(this.state.username,this.state.password)} >{t("Login")}}</Button>

为什么在TextField ReactJS中键入按钮时会触发按钮的onClick事件

2 个答案: