Javascript 如何在“与状态反应”中使用切换？

在React中使用状态的解决方案有问题

我没有使用bind方法，因为我更愿意使用arrow函数以这种方式工作

constructor(props) {
    super(props);

    this.state = {
        isOpen: false
    };
}

toggleNavbar = () => {
    this.setState(prevState => ({
        isOpen: !prevState.isOpen;
    });
}

render() {
    const { isOpen } = this.state;

return (
  <nav className="navbar navbar-expand-lg navbar-light bg-light">
    <a className="navbar-brand mr-4" href="">Do you want to build sowman?</a>
    <button
      className="navbar-toggler"
      type="button"
      data-toggle="collapse"
      data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
      onclick={() => this.toggleNavbar()}>
      <span className="navbar-toggler-icon" />
    </button>
    <div
      className="collapse navbar-collapse"
      id="navbarSupportedContent"
      isOpen={isOpen}>

构造函数（道具）{
超级（道具）；
此.state={
伊索彭：错
};
}
toggleNavbar=（）=>{
this.setState（prevState=>({
isOpen:！prevState.isOpen；
});
}
render（）{
const{isOpen}=this.state；
返回(
this.toggleNavbar（）}>

---

我希望切换按钮显示/隐藏即将到来的div。（这只是文本的一个示例，本身无法工作）

由于您使用的是箭头函数，您只需定义如下属性：

onclick={this.toggleNavbar}>

---

不要在Property内再做一个箭头功能参见此小提琴，它工作正常：

简单切换状态和显示消息的示例代码。它使用箭头函数，只需更新状态等参否定

class Hello extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
        isOpen: false
    };
  }

  toggleNavbar() {
      this.setState({
          isOpen: !this.state.isOpen
      });
  }

  render() {
      const { isOpen } = this.state;

      return (
         <div onClick={() => this.toggleNavbar()}>Click Me 
           {isOpen && <div>IS OPEN</div>}
         </div>
      );

  }
};

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

类Hello扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
伊索彭：错
};
}
toggleNavbar（）{
这是我的国家({
isOpen:！this.state.isOpen
});
}
render（）{
const{isOpen}=this.state；
返回(
this.toggleNavbar（）}>单击我
{isOpen&&IS OPEN}
);
}
};
ReactDOM.render(
,
document.getElementById（'容器'）
);

要根据状态切换div，您可以：

从

toggleNavbar

内的setState属性中删除分号

；

React不允许为属性名称编写camelcase。请在

#navbarSupportedContent

div中将

isOpen

更改为

isOpen

指定一个字符串而不是布尔值作为

isopen

属性值，并在此基础上相应地更改div的css

您可以在此中使用上面的css和html查看一个实际示例，也可以在下面的代码片段中查看React类组件代码：

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
伊索彭：错
};
}
toggleNavbar=（）=>{
this.setState（prevState=>({
isOpen:！prevState.isOpen
}));
}
render（）{
const{isOpen}=this.state；
返回(
点击我
你好，世界

)
}
}
ReactDOM.render（，document.getElementById（'main'））；

那么问题出在哪里呢？里面

非常感谢！这在我脑海中是有意义的：）我不明白后来我不得不使用这个道具…我想如果它是假的，它就不会显示，如果它是真的，它就会显示。我知道Reactstrap是这样使用它的。但是我想我必须手动操作。如果它是真/假，有没有办法用bootstrap类系统来执行它（这样我就不必在单独的文件中编写规则）很高兴我能帮上忙。我会尝试修改代码，看看我们是否可以使用引导类系统来切换div。