如何在ReactJS中编写onClick事件？

嘿，我懂你的需求啦——想让表单的提交按钮点击时触发自定义逻辑对吧？在React里处理表单提交，其实有更规范顺手的做法，我来帮你调整代码：

首先，给<form>元素绑定onSubmit事件会比单独给submit按钮加onClick更合理，它既能兼容点击按钮提交，也能响应回车提交的场景，还能轻松处理浏览器默认的页面刷新行为。下面是修改后的完整代码：

render: function () {
  return (
    <form className="commentForm" onSubmit={this.handleSubmit}>
      <input 
        type="text" 
        placeholder="Your name" 
        value={this.state.author} 
        onChange={this.handleAuthorChange} 
      />
      <input 
        type="text" 
        placeholder="Say something..." 
        value={this.state.text} 
        onChange={this.handleTextChange} 
      />
      <input type="submit" value="Post" />
    </form>
  );
}

// 记得在组件里定义对应的提交处理方法
handleSubmit: function(e) {
  // 必须阻止表单默认的提交刷新行为，不然页面会直接跳转
  e.preventDefault();
  
  // 先做个简单的非空校验
  const author = this.state.author.trim();
  const text = this.state.text.trim();
  if (!author || !text) {
    alert("请填写完整内容哦");
    return;
  }
  
  // 这里写你实际要执行的提交逻辑，比如发送请求到后端、更新组件状态等
  console.log("提交的评论：", { author, text });
  
  // 提交后可以清空输入框，提升用户体验
  this.setState({
    author: "",
    text: ""
  });
}

额外说明：如果非要给submit按钮加onClick #

如果你确实想直接给按钮绑定点击事件，也可以这么写，但同样要处理默认行为：

<input 
  type="submit" 
  value="Post" 
  onClick={(e) => {
    e.preventDefault(); // 阻止默认提交行为
    this.handleSubmit(); // 调用自定义处理逻辑
  }}
/>

不过这种方式只能响应点击按钮的场景，用户按回车提交时不会触发，所以还是推荐第一种绑定在<form>的onSubmit上的方案~

内容的提问来源于stack exchange，提问作者Mandar Dhadve