时间戳

首页 > 解决方案 > 仅从 React.js 中的单击按钮切换内容

javascript - 仅从 React.js 中的单击按钮切换内容

问题描述

我正在尝试更改div.Filters单击加号或减号按钮时的显示。按钮在单击时更改，如果它是+更改为-，反之亦然。

这是代码：

export class NavLeftMobile extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      isToggle: true
    };
  }

  handleClick(e) {
    this.setState({
      isToggle: !this.state.isToggle
    });
  }

  render() {
    let button;

    if (this.state.isToggle) {
      button = (
        <button className="Menos" onClick={() => this.handleClick()}>
          -
        </button>
      );
    } else {
      button = (
        <button className="Menos" onClick={() => this.handleClick()}>
          +
        </button>
      );
    }

    return (
      <div>
        <div className="NavLeftMobile">
          <h1>categories</h1>
          <h3>Manufacturer{button}</h3>
          <div
            className="Filters"
            style={{ display: this.state.isToggle ? "block" : "none" }}
          >
            <p>Lusograph (10)</p>
          </div>

          <h3>Color{button}</h3>
          <div
            className="Filters"
            style={{ display: this.state.isToggle ? "block" : "none" }}
          >
            <p>Black (10)</p>
          </div>
        </div>
      </div>
    );
  }
}

因此，当单击其中一个按钮时，将调用 handleClick 函数，并且显示从div.Filters发生变化，如果它被阻止则变为无，反之亦然。基本上，我想将每个部分相互独立地切换。

标签： javascriptreactjsreact-native

解决方案

如果您希望每个部分都是可折叠和独立的，那么状态不应该存在于您的包装组件上，而是您可以创建另一个跟踪它的类组件。

class Collapsible extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      collapsed: true
    };
  }

  onToggle = () => {
    const { collapsed } = this.state;
    this.setState(() => ({
      collapsed : !collapsed
    }))
  } 

  render () {
    const { title, children } = this.props;
    const { collapsed } = this.state;
    return (
      <div>
        <h3>
          {title}

          <a onClick={this.onToggle}>
            {collapsed ? '+' : '-'}
          </a>
        </h3>
        <div style={{
            display : collapsed ? "block" : "none"
          }}>
          {children}
        </div>
      </div>
    );
  }
}

class NavLeftMobile extends React.Component {
  render() {

    return (
      <div>
        <div className="NavLeftMobile">
          <h1>categories</h1>
          <Collapsible title="Manufacturer">
            Lusograph (10)
          </Collapsible>
          <Collapsible title="Color">
            Black (10)
          </Collapsible>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <NavLeftMobile/>,
  document.querySelector('#app')
);

推荐阅读