ReactJS:这个。道具。toggleModal不是一个函数

我试图从子对象访问父方法,以在屏幕上显示模式,但出现错误: This.props.toggleModal is not a function . 我将该方法传递给子级,以便调用它并使用正确的状态(我认为)。该按钮确实调用了自己的方法,而该方法又调用了父级。模态组件位于应用程序内部。js。

应用程序。js公司

class App extends Component {
  constructor() {
  super()
this.state = {
    isOpen: false
 }
}
toggleModal = () => {
this.setState({
  isOpen: !this.state.isOpen
});
console.log('Open');
}
render() {
return (
  <div className="App">
    <Modal toggleModal={this.toggleModal} show={this.state.isOpen}
          onClose={this.toggleModal}>
          Here's some content for the modal
    </Modal>
    <div className="container">
      <Header/>
      <main>
        <Route path="/users"
           children={({ match, ...rest }) => (
             <TransitionGroup component={firstChild}>
               {match && <UserList {...rest} />}
             </TransitionGroup>
        )}/>
        ...
      </main>
      <Footer />
    </div>
  </div>
);
}
}

搜索栏。js公司 -(位于用户页面内)

class SearchBar extends Component {
constructor(props) {
super(props)
this.state = {
  type: this.props.type,
  value: ''
};
}
componentWillReceiveProps(nextProps) {
if (nextProps.type !== this.props.type) {
  this.setState({ type: nextProps.type });
}
};
handleClick = (e) => {
e.preventDefault();
console.log("Clicked!!!");
this.props.toggleModal();
};
handleChange = e => {
  console.log(this.state.type);
  this.setState({ value: e.target.value });
};

render () {
const isUser = this.state.type;
let rightContent = null;
if (isUser === "tour" || isUser === "venue") {
rightContent =
<div className="column">
  <div className="float-right"><button className="add-new" onClick={this.handleClick}>Add New</button></div>
</div>
} else {
rightContent =
<div className="column">
    <div className="float-right">
      <div className="results-block">
        <b>0</b>/<small>292</small>
      </div>
    </div>
  </div>
}
return (
<div className="row main-search">
  <div className="column">
      <form action="">
        <fieldset>
          <label htmlFor="search">
            <input type="text"
                placeholder="Start typing..."
                id="search-box"
                onChange={this.handleChange}
                value={this.state.value} />
          </label>
        </fieldset>
      </form>
  </div>
  {rightContent}
</div>
)
}
}

export default SearchBar;