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

问题描述

我正在尝试将单击处理程序函数传递给子组件，但我无法弄清楚它为什么不起作用。

我尝试将我的点击处理程序变成一个 lambda 函数，将它绑定到父组件，并使我在子组件中的 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 中的道具记录到控制台，handleClick 是未定义的，这真的让我感到困惑

标签： javascriptreactjs

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

问题描述

解决方案

推荐阅读