Javascript 在页面加载时触发提交函数时对js作出反应

我是新来的。我试图将一个简单的应用程序与三个组件组合在一起——一个父组件（SearchContainer）和两个子组件（SearchForm和ResultsContainer）。其思想是让搜索表单上的输入使用搜索查询更新SearchForm的状态。然后表单有一个onSubmit函数，它触发一个AJAX请求，该请求接受查询、点击API并检索搜索结果。现在，onSubmit函数在页面加载后立即启动，并继续一次又一次地启动。我不明白为什么会这样。代码如下：

SearchContainer（父组件）：

var React=require（'React'）；
var resultcontainer=require（'./resultcontainer.jsx'）
var SearchForm=require（'./SearchForm.jsx'）
var SearchContainer=React.createClass({
getInitialState:函数（）{
返回{
结果：空，
形式：'http://localhost:3000/search',
formMethod:'获取'，
};
},
executeSearch:函数（查询）{
console.log（“执行搜索”）；
风险值数据={
查询：查询，
};
$.ajax({
url:this.state.formAction，
数据：数据，
数据类型：“json”，
success:this.successFunction，
error:this.error函数，
});
},
handleSearch：函数（查询）{
this.executeSearch（查询）；
},
成功函数：函数（响应）{
控制台日志（“成功”）；
this.setState（{results:response[“results”]}）；
},
errorFunction:function（）{
控制台日志（“错误”）；
},
渲染：函数（）{
返回(
);
},
});
module.exports=搜索容器；

搜索表格（儿童）：

var React=require（'React'）；
var resultcontainer=require（'./resultcontainer.jsx'）
var SearchForm=React.createClass({
getInitialState:函数（）{
返回{
查询：“”，
};
},
handleChange:函数（事件）{
this.setState（{query:event.target.value}）；
},
渲染：函数（）{
返回(
);
},
});
module.exports=搜索表单；

---

是什么导致handleSearch功能反复启动？感谢您的帮助。

在呈现表单时，此行调用函数

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

然后你的表格会像这样

<form onSubmit={this.handleSearch}>

---

这是因为您正在调用搜索功能：

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

render

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

你可能想做一些类似的事情

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

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

试试这个

替换

  {this.props.handleSearch(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>

---

您在React中放置在大括号{…}内的任何内容都将被视为JavaScript表达式，当然，当

render（）

方法运行时将运行该表达式

相反

你喜欢这样吗

logToConsole（）{
log（'提交表单后我将被记录：）'；
}
渲染(
返回（）
)

###第一种解决方案：
当然，您需要传递给事件处理程序的是一个将在事件触发时触发的函数。
handleSubmit（e）{
e、 preventDefault（）；//防止本机提交行为
//在这里提交任何东西！
}
render（）{
返回(
......
)
}
###第二种解决方案：
您可以如上所述定义自定义事件处理程序，也可以使用箭头函数内联完成任务。
有关箭头函数的更多信息，请参见：http://exploringjs.com/es6/ch_arrow-functions.html
render（）{
返回(
{e.preventDefault（）；/*在此处执行操作*/}}>
......
)
}

好的，太好了！这对提交搜索查询有效，但我意识到我仍然需要防止表单的默认操作。有没有办法做到这一点？我可以让handleSearch函数接受两个参数吗？事件和查询？我编辑了答案。你能试试这个让我知道吗？这是一个好主意，但家长不能了解孩子的状态。状态查询保存在子组件searchForm中。有没有一种方法可以将状态传递给家长？是的，有。从父级传递

onChange

。这样，所有与表单相关的逻辑都将位于父组件aka中。智能组件和SearchForm组件将是一个哑组件。如果其中一个是正确答案，请单击答案左侧的空复选标记以帮助其他查找此问题的人。

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

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

  {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>

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

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>
        )
    }