Question

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

我尝试将点击处理程序变成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是未定义的，这确实使我感到困惑

Answer 1

toggleNavBar！== toggleNavbar-区分大小写非常重要：）

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

1 个答案: