onClick事件不适用于样式组件，但适用于所有其他组件

Question

我使用样式组件在反应中构建汉堡菜单。

const Line = styled.div`
    width: 3.5rem;
    height: .3rem;
    background-color: green;
    :not(:last-child) {
        margin-bottom:.4rem
    }
`;

const Burger = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    order: 1;
    margin-left: 2rem;
    cursor: pointer;
    ${Line}:nth-child(1) {
        background-color: ${ ({isOpen}) => isOpen ? 'yellow' : 'red'};
    }
    ${Line}:nth-child(2) {
        background-color: ${ ({isOpen}) => isOpen ? 'yellow' : 'red'};
    }
    ${Line}:nth-child(3) {
        background-color: ${ ({isOpen}) => isOpen ? 'yellow' : 'red'};
    }
`;


export default function BurgerMenu(props) {
    console.log('isOpen is: ', props.isOpen)
    return (
        <Burger isOpen={props.isOpen}>
            <Line></Line>
            <Line></Line>
            <Line></Line>
        </Burger>
    )
}

我创建一个放置汉堡组件的导航组件。 在导航组件中，我创建一个状态来管理打开/关闭汉堡菜单。 更改状态的方法可以正常工作。

const NavigationContainer = styled.nav`
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
`;

const NavigationList = styled.ul`
    display: flex;
    align-items: center;
    list-style: none;
`;
const NavigationItem = styled.li`

    :not(:last-child){
        margin: 0 1rem 0 0;
    }
`;
const NavigationLink = styled(Link)`
    :link,
    :visited {
        color: #fff;
        font-size: 1.8rem;
        text-decoration: none;
        border: .2rem solid ${props => props.choosen ? '#fff' : 'transparent'};
        border-radius: .5rem;
        padding: 1rem 2rem;
    }

    :hover {
        border: .2rem solid #fff;
    }

    :active {

    }

    ::-moz-focus-inner {
        border: none;
    }
`;

export default class Navigation extends Component {
    constructor(props){
        super(props)
        this.state = {
            isOpenNavigation: true
        }
        this.openNavigation = this.openNavigation.bind(this);
    }

    openNavigation() {
        this.setState({
            isOpenNavigation: !this.state.isOpenNavigation
        })

    }

    render() {


        return (
            <NavigationContainer>
                {/* here onClick event works */}
                <p onClick={this.openNavigation}>here onClick is working</p>

                {/* here onClick event doesn't works */}
                <BurgerMenu isOpen={this.state.isOpenNavigation} onClick={this.openNavigation} />

                <NavigationList>

                    <NavigationItem>
                        <NavigationLink onClick={this.activeHome} to='/'>Home</NavigationLink>
                    </NavigationItem>

                    <NavigationItem>
                        <NavigationLink onClick={this.activeRandom} to='/random'>Random rule</NavigationLink>
                    </NavigationItem>

                    <NavigationItem>
                        <NavigationLink onClick={this.activeRules} to='/rules'>List of rules</NavigationLink>
                    </NavigationItem>

                </NavigationList>

            </NavigationContainer>
        )
    }
}

onClick事件不适用于汉堡菜单，但适用于所有其他组件。

我试图通过openNavigation方法作为道具。

{/* here onClick event works */}
                <p onClick={this.openNavigation}>here onClick is working</p>

                {/* here onClick event doesn't works */}
                <BurgerMenu isOpen={this.state.isOpenNavigation} onClick={this.openNavigation} />

我希望onClick事件在汉堡菜单组件上开始起作用。

Answer 1

您需要将openNavigation方法传递给Burger样式的div。

<BurgerMenu isOpen={this.state.isOpenNavigation} handleClick={this.openNavigation}>

export default function BurgerMenu(props) { console.log('isOpen is: ', props.isOpen) return ( 
<Burger isOpen={props.isOpen}
onClick={props.handleClick}> 
<Line></Line> <Line></Line> <Line></Line>
 </Burger> 
) }