如何在状态中使用切换？

Question

在React中找不到使用状态的解决方案。

我还没有使用bind-method来完成它，因为我希望通过箭头功能使它以这种方式工作。

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

我希望切换按钮显示/隐藏前面的div（这只是文本的一个示例，不能单独使用）

Answer 1

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

1. 删除分号; 从toggleNavbar内的setState属性中。

2. React不允许使用驼峰式写法来编写属性名称。 更改isOpen到isopen在#navbarSupportedContent股利。

3. 指定一个字符串而不是布尔值作为您的isopen属性值，并根据该值相应地更改div的css。

您可以在此与CSS和上面的HTML检查出一个实际的例子CodePen或者你可以检查下面的代码片段的阵营类组件的代码：

 class App extends React.Component { constructor(props) { super(props); this.state = { isOpen: false }; } toggleNavbar = () => { this.setState(prevState => ({ isOpen: !prevState.isOpen })); } render() { const { isOpen } = this.state; return ( <div> <button onClick={this.toggleNavbar}>Click Me</button> <div id="navbarSupportedContent" isopen={isOpen ? "open" : "close"}> <p>Hello World</p> </div> </div> ) } } ReactDOM.render(<App />, document.getElementById('main')); 

---

或者，您可以将&& operator用作@aboveukaszBlaszyński，如上所示，方法是：

1. 删除分号; 从toggleNavbar内的setState属性中。

2. 使用&& operator可以根据isOpen状态属性来切换div。

您可以检查出上述的实际例子在这个CodePen或者你可以检查下面的代码片段的阵营类组件的代码：

 class App extends React.Component { constructor(props) { super(props); this.state = { isOpen: false }; } toggleNavbar = () => { this.setState(prevState => ({ isOpen: !prevState.isOpen })); } render() { const { isOpen } = this.state; return ( <div> <button onClick={this.toggleNavbar}>Click Me</button> {isOpen && <div id="navbarSupportedContent" > <p>Hello World</p> </div>} </div> ) } } ReactDOM.render(<App />, document.getElementById('main')); 

Answer 2

由于您使用的是箭头功能，因此只需定义属性即可：

onclick={this.toggleNavbar}>

而不是在属性内制作另一个箭头功能

Answer 3

看到这个小提琴就可以正常工作： https : //jsfiddle.net/y5gqrf02/1/

示例代码可以简单地切换状态并根据状态不显示消息。 它使用箭头功能，只需将isOpen否定状态更新即可。

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