javascript - 如何将单击处理程序传递给子组件

Question

我试图将点击处理函数传递给子组件，但我不明白为什么它不起作用。

我尝试将我的点击处理程序设为 lambda 函数，将其绑定(bind)到父组件，并将子组件中的 onClick 设为 lambda 函数，但似乎没有任何效果。

父组件

import React from 'react';
import NavMenuButton from './navMenuButton.js';

export default class NavBar extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            navBarOpen: true
        };
        this.toggleNavbar = this.toggleNavbar.bind(this);
    }

    toggleNavbar() {
        console.log('Toggled!');
        this.setState({
            navBarOpen: this.state.navBarOpen ? false : true
        });
    }

    render() {
        return (
            <NavMenuButton
                handleClick={this.toggleNavBar}
                navBarOpen={this.state.navBarOpen}
            />
        );
    }
}

子组件

import React from 'react';

export default class NavMenuButton extends React.Component{
    constructor(props){
        super(props)
    }

    render(){

        const styles = {
            navButton: this.props.navBarOpen 
            ? {fontSize:26, cursor:'pointer', userSelect:'none'} 
            : {fontSize:26, cursor:'pointer', userSelect:'none'}
        }

        return(
            <div>
                <span
                    style={styles.navButton} 
                    onClick={this.props.handleClick}
                    >
                    {'\u2630'}
                </span>
                {this.props.navBarOpen 
                 ? <p>its open</p>
                 : <p>its closed</p>}
            </div>
        );
    }
}

这个配置是我认为应该有效的，但是如果我将 navMenuButton 中的 Prop 记录到控制台，handleClick 是未定义的，这真的让我很困惑

Answer 1

toggleNavBar !== toggleNavbar - 区分大小写非常重要:)