Question

我试图通过点击加或减按钮来更改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>
    );
  }
}

因此，当单击其中一个按钮时，如果将 block 更改为 none ，则div.Filters的显示将发生变化，反之亦然。基本上，我想彼此独立地切换每个部分。

Answer 1

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

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')
);

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

1 个答案: