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

我试图通过道具将表单提交处理程序发送到子元素。所有内容都会呈现，但当我单击“提交”按钮时，我没有收到任何警报（请参见

handleSubmit

函数中的

alert（'Hi'）

），我也没有看到

搜索结果的元素发生变化。相反，整个页面会重新加载，我会回到初始状态。怎么了

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;

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;

class SearchResults extends React.Component {

    render() {
        return (
            this.props.results.map((result) => (<div key={result.key}>{result.name}</div>))
        )
    }
}

export default SearchResults;

类搜索器扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
结果:[
{名称：'1'，键：0}，
{名称：'2'，键：1}
]
};
}
handleSubmit=（事件）=>{
警报（“Hi”）；
这是我的国家({
结果:[
{name:'hi'，键：0}，
{name:'再次'，键：1}
]
})
event.preventDefault（）；
}
render（）{
返回(
)
}
}
导出默认搜索器；

SearchForm.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;

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;

class SearchResults extends React.Component {

    render() {
        return (
            this.props.results.map((result) => (<div key={result.key}>{result.name}</div>))
        )
    }
}

export default SearchResults;

类SearchForm扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:''}；
this.handleChange=this.handleChange.bind（this）；
}
handleChange（事件）{this.setState（{value:event.target.value}）；}
render（）{
返回(
);
}
}
导出默认搜索表；

SearchResults.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;

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;

class SearchResults extends React.Component {

    render() {
        return (
            this.props.results.map((result) => (<div key={result.key}>{result.name}</div>))
        )
    }
}

export default SearchResults;

类搜索结果扩展了React.Component{
render（）{
返回(
this.props.results.map（（result）=>（{result.name}））
)
}
}
导出默认搜索结果；
在Searcher.js的
中作为道具传递
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>
        )
    }

render（）{
返回(
//传递句柄提交
//我没有看到handleSubmit在搜索结果中被使用
)
}
尝试将
handleSubmit
传递给
SearchForm
，否则其值将
未定义

class Searcher extends React.Component {
    ...

    handleSubmit = (event) => {
        alert('Hi');
        ...
    }

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

export default Searcher;

类搜索器扩展React.Component{
...
handleSubmit=（事件）=>{
警报（“Hi”）；
...
}
render（）{
返回
}
}
导出默认搜索器；
您没有在Searcher.js中的
中传递
handleSubmit
。请详细说明一下，您应该将
handleSubmit
从搜索者传递到SearchForm。。。i、 e.