web-dev-qa-db-ja.com

React-クリック時のCSSプロパティの変更（矢印機能）

私はReact/Gatsbyファイルの1つに以下を持っています：

_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", ..._を持っていることがハードコードされています。

私はこれが正しく行われているのか、誰かがこれらのさまざまな関数に緩くすべてを持っているのかどうかも疑問に思っています。

javascripthtmlcssreactjsgatsby
6
George Welder

制御クラスはステートフルである必要があります。ドロップダウンが開いているか閉じているかに関してブール状態を維持する必要があります。ドロップダウンをレンダリングするときに、ブール値が開いている場合はドロップダウンが表示され、そうでない場合は表示されません。

これを行うために書き直したコードを次に示します。子コンポーネントは小道具を引数として取ることに注意してください。これは親が彼らと通信する方法です。これらの小道具の一部はコールバックです。これが、子が親に通信する方法です。

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>
    );
  }
}
9
Brandon