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

导出类navletmobile.Component{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
此.state={
伊斯托格尔：是的
};
}
handleClick（e）{
这是我的国家({
isToggle:！this.state.isToggle
});
}
render（）{
让按钮；
if（this.state.isToggle）{
按钮=(
this.handleClick（）}>
-
);
}否则{
按钮=(
this.handleClick（）}>
+
);
}
返回(
类别
制造商{按钮}
路标（10）

颜色{按钮}
黑色（10）

);
}
}

因此，当单击其中一个按钮时，将调用handleClick函数，如果是块，则显示从

div.Filters

更改为无，反之亦然。

---

基本上，我希望每个部分彼此独立切换。

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

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.Component{
建造师（道具）{
超级（道具）；
此.state={
真的吗
};
}
onToggle=（）=>{
const{collapsed}=this.state；
此.setState（（）=>({
崩溃了：！崩溃了
}))
} 
渲染（）{
const{title，children}=this.props；
const{collapsed}=this.state；
返回(
{title}
{折叠？'+'：'-'}
{儿童}
);
}
}
类NavLeftMobile扩展React.Component{
render（）{
返回(
类别
路标（10）
黑色（10）
);
}
}
ReactDOM.render(
,
document.querySelector（“#app”）
);

是否要独立切换每个部分？您面临的具体问题是什么？是的，当我单击一个按钮时，所有部分都会折叠，并且我只希望其中一个部分折叠，具体取决于我单击的按钮是可折叠的reactstrap组件？@SofiaRibeiro可折叠组件是给定示例提供的代码中定义的组件。AngelSalazar基本上为您创建了该组件，因此它可以重用，并且独立于每个过滤器选项。感谢@ReyHaynes的解释，感谢AngelSalazar的代码，它确实帮助了我！