React - 单击时更改 CSS 属性（箭头功能）答案

【问题标题】：React - Changing CSS property on click (arrow function)React - 单击时更改 CSS 属性（箭头功能）
【发布时间】：2023-03-24 09:06:01
【问题描述】：

我的一个 React / Gatsby 文件中有以下内容：

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>

现在我想在有人按下NavButton 时触发click()，然后我想让Dropdown 可见。我该怎么做？现在我硬编码了Dropdown 有style={{visibility: "hidden", ...。

我也想知道我这样做是否正确，将所有内容松散地放在这些不同的功能中，如果有人能告诉我那会很棒！

【问题讨论】：

标签： javascript html css reactjs gatsby

【解决方案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>
    );
  }
}

【讨论】：