javascript - React js 在页面加载时触发提交函数

Question

我是 React 的新手。我试图将一个简单的应用程序与三个组件组合在一起——一个父组件 (SearchContainer) 和两个子组件 (SearchForm 和 ResultsContainer)。这个想法是让搜索表单上的输入用搜索查询更新 SearchForm 的状态。然后，表单有一个 onSubmit 函数，该函数触发 AJAX 请求，该请求接受查询、点击 API 并检索搜索结果。现在，onSubmit 函数在页面加载后立即触发，并不断地触发。我不明白为什么会这样。这是代码:

SearchContainer(父组件):

var React = require('react');
var ResultsContainer = require('./ResultsContainer.jsx')
var SearchForm = require('./SearchForm.jsx')

var SearchContainer = React.createClass({
  getInitialState: function () {
    return {
      results: null,
      formAction: 'http://localhost:3000/search',
      formMethod: 'get',
    };
  },
  executeSearch: function(query) {
    console.log("executing search");
    var data = {
      query: query,
    };
    $.ajax({
      url: this.state.formAction,
      data: data,
      dataType: 'json',
      success: this.successFunction,
      error: this.errorFunction,
    });
  },

  handleSearch: function(query) {
    this.executeSearch(query);
  },
  successFunction: function(response){
    console.log("success");
    this.setState({results: response["results"]});
  },
  errorFunction: function(){
    console.log("error");
  },
  render: function () {
    return (
     <div className='center-text'>
       <SearchForm formAction={this.state.formAction} formMethod={this.state.formMethod} handleSearch={this.handleSearch}/>  
       <ResultsContainer results={this.state.results}/>
     </div>
    );
  },
});

module.exports = SearchContainer; 

搜索表单(子):

var React = require('react');
var ResultsContainer = require('./ResultsContainer.jsx')


var SearchForm = React.createClass ({
  getInitialState: function () {
    return {
      query: "",
    };
  },

  handleChange: function(event) {
    this.setState({query: event.target.value});
  },

  render: function () {
    return (
      <div>
        <form onSubmit={this.props.handleSearch(this.state.query)} >
          <input className="query" type="text" placeholder="Search..." onChange={this.handleChange}></input>
          <input type="submit" value="Search" ></input>
        </form>
      </div>
    );
  },

});

module.exports = SearchForm;

是什么导致 handleSearch 函数反复触发？感谢您的帮助。

Answer 1

在 React 中放在大括号 { ... } 内的任何内容都将被视为 JavaScript 表达式，当然会在 render() 时运行。方法运行。

取而代之

<form onSubmit={console.log('sorry, I am fired on page load! ') }></form>

这样做

logToConsole() {

     console.log('I will be logged once form is submitted :)');
}

render(
   return (<form onSubmit={this.logToConsole}></form>)
)

### 1st SOLUTION:
Surely what you need to pass to an event handler is a function that is going to be triggered on event fire.

    handleSubmit(e) {
         e.preventDefault(); // prevent native submitting behavior

         // do anything on submit, here!

    }
    render() {
        return(
            <form onSubmit={this.handleSubmit}>
                 ......
            </form>
        )
    }

### 2nd SOLUTION:
You can define a custom event handler as stated above, or you may also use Arrow functions to get the job done inline.
See for more about Arrow functions: http://exploringjs.com/es6/ch_arrow-functions.html

    render() {
        return(
            <form onSubmit={(e) => {e.preventDefault(); /* DO SOMETHING HERE */}}>
                 ......
            </form>
        )
    }