javascript - 在 html 中使用表单的 React 方式，提交操作与 ajax 请求一起发生

Question

我的用例如下。我有一些看起来像这样的 React 组件:

    var MyComponent = React.createClass({
        handleButton() {
           $.ajax..... post {this.state.inputData} to server
           error: console.log(url,error)
        },

        handleInputOnChange(event) {
           this.setState({inputData: event.target.value});
        },

        render: function () {
          return (
           <form>
             <input type="text" id="input1" onChange={this.handleInputOnChange}/>
             <button>apply</button>
           </form>
                  )
        }
    });

问题是，当我按下按钮时，服务器获取正确的数据，日志中没有错误，一切看起来都很顺利，但浏览器控制台显示错误:error, "" ，地址行中出现奇怪的东西，看起来像 localhost:8080?input1=并且页面从服务器重新加载，丢失所有输入的数据。

显然html submit操作随着 ajax 一起发生POST通过 <form> 请求不包含任何 url 或其他说明来执行此操作。我变了<form>将组件中的标签标记为 <div>标签，问题就消失了。

但是我的 html 开发人员告诉我，所有输入数据都应该在 <form> 内处理。只是，我错了，所以走向了黑暗面。

抱歉，我问了一个愚蠢的问题，我仍然是前端初学者，但是处理这个问题的正确方法是什么？

Answer 1

如果您通过ajax处理请求，您应该 prevent the default behaviour单击按钮，这意味着表单不会自动提交。因此，在 handleButton 内，您将获取事件对象并调用 preventDefault:

handleButton(event) {
  event.preventDefault()
  $.ajax..... post {this.state.inputData} to server
  error: console.log(url,error)
}

这应该会停止页面刷新。