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，您可以：

从;内的setState属性中删除分号toggleNavbar。
React不允许使用驼峰式写法来编写属性名称。在您的isOpen格中将isopen更改为#navbarSupportedContent。
指定一个字符串而不是一个布尔值作为您的isopen属性值，并在此基础上相应地更改div的css。

您可以在此CodePen中查看上述CSS和html的实际示例，也可以在下面的代码段中查看React类组件代码：

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，如上图所示的@ŁukaszBlaszyński：

从;内的setState属性中删除分号toggleNavbar。
使用&& operator来切换div，具体取决于isOpen的state属性。

您可以在此CodePen中查看上述示例，也可以在下面的代码段中查看React类组件代码：

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

如何在状态中使用切换？

3 个答案: