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

Question

我使用 styled-component 在 react 中构建汉堡菜单。

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> 
) }