在页面加载时触发提交函数时反应 js

Question

我是 React 新手。我正在尝试将一个简单的应用程序与三个组件组合在一起 - 一个父组件（SearchContainer）和两个子组件（SearchForm 和 ResultsContainer）。这个想法是让搜索表单上的输入使用搜索查询更新 SearchForm 的状态。然后有一个用于触发 AJAX 请求的表单的 onSubmit 函数，该请求接受查询、访问 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>
        )
    }

Answer 2

试试这个。

替换

  {this.props.handleSearch(this.state.query)}

有

{this.props.handleSearch.bind(null,this.state.query)}

所以表单现在是

  <form onSubmit={this.props.handleSearch.bind(null,this.state.query)} >
      <input className="query" type="text" placeholder="Search..." onChange={this.handleChange}></input>
      <input type="submit" value="Search" ></input>
    </form>

原因：

在您的代码中，您实际上是在调用 onSubmit 函数而不触发提交事件。在新代码中，您只是将函数绑定到事件。它会在事件真正触发时被调用。

编辑：

如果你还需要事件对象，防止默认。

handleSearch: function(query,event) {
    console.log(event);
    event.preventDefault();
    this.executeSearch(query);
}

Answer 3

这是因为你调用了搜索功能：

this.props.handleSearch(this.state.query)

render 方法在页面加载时运行，并将调用您告诉它的任何函数。

你可能想做类似的事情

handleSearch( event ) {
    event.preventDefault();
    this.props.handleSearch(this.state.query);
},

render() {
    ...
    onSubmit={this.handleSearch}

Answer 4

此行在渲染表单时调用该函数。

<form onSubmit={this.props.handleSearch(this.state.query)}>

要解决这个问题，不要放置()，而是从您的提交处理程序中访问this.state.query。 React 将执行它在每个 render 传递中找到的任何函数。

handleSearch (event) {
    event.preventDefault();
    this.props.handleSearch(this.state.query);
}

然后您的表单将如下所示

<form onSubmit={this.handleSearch}>