javascript - 如何处理只点击一次反应中的项目

Question

首先，对不起我的英语不好。我想做一个类别树组件，而自爆是我的渲染代码。

class tree extends Component {
constructor(props) {
    super(props);
    this.state = {
        showBig1: false,
        showBig2: false,
        showSmall1: false,
        showSmall2: false,
        current: 'fake',
        fake: false
    };

}

toggleBigMenu = (type, current_now) => {
    this.state = {
        [current_now]: false,
        [type]: true,
        current: type
    }
}


render() {
    const {showBig1, showBig2, showSmall1, showSmall2} = this.state
    return (
        <div>
            <li className={showBig1 ? "on" : "off"} onClick={this.toggleBigMenu("showBig1", current)}>
                <Link to="#">
                    <span>BIG MENU 1</span>
                </Link>
            </li>
            <li className={showBig2 ? "on" : "off"} onClick={this.toggleBigMenu("showBig2", current)}>
                <Link to="#">
                    <span>BIG MENU 2</span>
                </Link>
                <ul>
                    <li className={showSmall1 ? "on" : "off"} onClick={this.toggleBigMenu("showSmall1", current)}>
                        <Link to="#">
                            <span>SMALL MENU 1</span>
                        </Link>
                    </li>
                    <li className={showSmall2 ? "on" : "off"} onClick={this.toggleBigMenu("showSmall2", current)}>
                        <Link to="#">
                            <span>SMALL MENU 2</span>
                        </Link>
                    </li>
                </ul>
            </li>

        </div>
    )
}

}

我想一次只点击一个“li”项目。但是当我点击 BIG MENU1 时，它点击了 BIG MENU 2。BIG MENU 2 的状态变为 true，但我想转 BIG MENU 1 的状态。

我不知道如何解决它..请任何人帮助我。谢谢你。

标签： javascriptreactjs

Answer 1

通过编写onClick={this.toggleBigMenu("showBig1", current)}，您this.toggleBigMenu直接在渲染上调用。您可以创建一个在事件发生时将被调用的新函数。

current而不是每次更改菜单时都传递，您可以将所有菜单重置为falseis 并将单击的菜单设置为true。

由于您在其他菜单中有菜单，因此调用event.stopPropagation()click 事件也是一个好主意，这样嵌套的菜单就有机会被选中。

例子

const menus = {
  showBig1: false,
  showBig2: false,
  showSmall1: false,
  showSmall2: false
};

class Tree extends React.Component {
  state = { ...menus };

  toggleMenu = (event, type) => {
    event.stopPropagation();

    this.setState({
      ...menus,
      [type]: true
    });
  };

  render() {
    const { showBig1, showBig2, showSmall1, showSmall2, current } = this.state;

    return (
      <div>
        <li
          style={{ backgroundColor: showBig1 ? "green" : "red" }}
          onClick={event => this.toggleMenu(event, "showBig1")}
        >
          <span>BIG MENU 1</span>
        </li>
        <li
          style={{ backgroundColor: showBig2 ? "green" : "red" }}
          onClick={event => this.toggleMenu(event, "showBig2")}
        >
          <span>BIG MENU 2</span>
          <ul>
            <li
              style={{ backgroundColor: showSmall1 ? "green" : "red" }}
              onClick={event => this.toggleMenu(event, "showSmall1")}
            >
              <span>SMALL MENU 1</span>
            </li>
            <li
              style={{ backgroundColor: showSmall2 ? "green" : "red" }}
              onClick={event => this.toggleMenu(event, "showSmall2")}
            >
              <span>SMALL MENU 2</span>
            </li>
          </ul>
        </li>
      </div>
    );
  }
}

ReactDOM.render(<Tree />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>