React表单触发器按钮随着每个输入的范围

Question

我正在尝试创建一个具有两个输入和一个按钮的表单。单击按钮时，输入字段用于更新状态，然后显示带有保存在状态的信息的警报。目前，我的输入更改状态，但是每次将字母添加到输入中时，它都会调用警报功能...

handleSubmit= (e) =>{
    alert(JSON.stringify(this.state, null, '  '));
  }
  render() {
    return (
      <div className="App">
            <label>
              Username:
              <input
              type="text"
              name="username"
              placeholder="username"
              value={this.state.username}
              onChange={e => this.setState({ username: e.target.value })}
            />
            </label>
            <label>
              Password:
              <input
              type="text"
              name="password"
              placeholder="password"
              value={this.state.password}
              onChange={e => this.setState({ password: e.target.value })}
            />
            </label>
            <button onClick={this.handleSubmit()}>Submit</button>
            <p>{this.state.token}</p>
          <WelcomeStory></WelcomeStory>
      </div>
    );
  };

谢谢，这是我的第一个前端框架，所以这是一个很大的学习曲线。

Answer 1

您不希望立即调用该函数，而仅当单击按钮时。onClick是一个事件侦听器，等待在调用this.handleSubmit之前单击按钮。通过具有括号，它将在组件渲染后立即调用handleSubmit函数。关于您何时想了解何时应该使用括号，何时不应该这样做的话，人们会在何处详细介绍类似的问题：

。 。

<button onClick={this.handleSubmit}>Submit</button>