无法通过props将事件处理程序发送到子元素

Question

我正试图通过props向子元素发送一个表单提交处理程序。所有内容都会渲染，但当我单击提交按钮时，我没有收到任何警报(请参阅handleSubmit函数中的alert('Hi')(，而且我也没有看到SearchResults的元素发生变化。相反，整个页面重新加载，我又回到了初始状态。怎么了？

Searcher.js：

class Searcher extends React.Component {
constructor(props) {
super(props);
this.state = {
results: [
{name:'1', key:0}, 
{name:'2', key:1}
]
};
}
handleSubmit = (event) => {
alert('Hi');
this.setState({
results: [
{name: 'hi', key: 0},
{name: 'again', key: 1}
]
})
event.preventDefault();
}
render() {
return (
<div>
<SearchForm/>
<SearchResults results={this.state.results} handleSubmit={this.handleSubmit}/>
</div>
)
}
}
export default Searcher;

SearchForm.js：

class SearchForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {    this.setState({value: event.target.value});  }
render() {
return (
<form onSubmit={this.props.handleSubmit}>
<input type="text" value={this.state.value} onChange={this.handleChange} />
<input type="submit" value="Submit" />
</form>
);
}
}
export default SearchForm;

SearchResults.js：

class SearchResults extends React.Component {
render() {
return (
this.props.results.map((result) => (<div key={result.key}>{result.name}</div>))
)
}
}
export default SearchResults;

Answer 1

Searcher.js 中<SearchForm />中的道具传递handeSubmit

render() {
return (
<div>
<SearchForm handleSubmit={this.handleSubmit}/> // Pass Handle Submit 
<SearchResults results={this.state.results} /> // I don't see handleSubmit being used in SearchResults
</div>
)
}

Answer 2

尝试将handleSubmit传递给SearchForm，否则其值将为undefined

class Searcher extends React.Component {
...
handleSubmit = (event) => {
alert('Hi');
...
}
render() {
return <SearchForm handleSubmit={this.handleSubmit}/>
}
}
export default Searcher;