作出反应 - 在点击更改CSS属性（箭头功能）

Question

我已经在我的反应，和/盖茨比文件下列操作之一：

import React from "react" 

const click =() => { 
    console.log("J"); 
} 

const NavButton =() => 
    <button className="navbar-toggler navbar-toggler-right" style={{backgroundColor: 'blue', position: "absolute", margin: "30px"}}type="button" data-toggle="collapse" data-target="#collapsingNavbar" onClick={click}> 
    <div id="nav-icon1"> 
     <span></span> 
     <span></span> 
     <span></span> 
    </div> 
    </button> 

const Dropdown =() => 
<div style={{visibility: "hidden", backgroundColor: "blue", position: "absolute", height: "100%", width: "100%"}}> 
</div> 

export default (props) => 
    <div className="left col-xs-12 col-md-6"> 
    <Dropdown /> 
    <NavButton /> 
    {props.children} 
    </div> 

现在我想火click()每当有人按下NavButton，然后我想让Dropdown可见。我将如何做到这一点？现在我有硬编码Dropdown有style={{visibility: "hidden", ...。

我也想知道我是否正确地做了这件事，如果有人可以告诉我那会很棒！

Answer 1

您的控件类需要有状态：它需要维护布尔状态，以确定下拉列表是打开还是关闭。当渲染下拉菜单时，如果布尔值已打开，那么您将显示下拉菜单，否则您不会。

这是你的代码重写来做到这一点。请注意，子组件将道具作为参数。这是父母与他们沟通的方式。其中一些道具是回调，这是孩子与父母沟通的方式。

import React from "react" 

const NavButton = ({onClick}) => 
    <button className="navbar-toggler navbar-toggler-right" style={{backgroundColor: 'blue', position: "absolute", margin: "30px"}}type="button" data-toggle="collapse" data-target="#collapsingNavbar" onClick={onClick}> 
    <div id="nav-icon1"> 
     <span></span> 
     <span></span> 
     <span></span> 
    </div> 
    </button> 

const Dropdown = ({show}) => 
<div style={{visibility: show ? "visible" : "hidden", backgroundColor: "blue", position: "absolute", height: "100%", width: "100%"}}> 
</div> 

export default class Parent extends React.Component { 
    state = { 
    dropdownVisible: false, 
    }; 

    // toggles the dropdown each time it is called 
    toggleDropdown =() => this.setState(state => ({ 
    dropdownVisible: !state.dropdownVisible, 
    })); 

    render() { 
    return (
     <div className="left col-xs-12 col-md-6"> 
     <Dropdown show={this.state.dropdownVisible} /> 
     <NavButton onClick={this.toggleDropdown} /> 
     {this.props.children} 
     </div> 
    ); 
    } 
}