javascript - 如何使用切换来对状态使用react？

Question

在React中寻找使用状态的解决方案时遇到问题。

我没有使用绑定(bind)方法来完成它，因为我宁愿使用箭头函数使其以这种方式工作。

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 不允许使用驼峰式书写属性名称。将 #navbarSupportedContent div 中的 isOpen 更改为 isopen。

3. 指定一个字符串而不是 bool 值作为 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'));

<小时/>

或者您可以使用 && 运算符，如上面所示的@ŁukaszBlaszyński:

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

2. 使用 && 运算符 根据 isOpen 状态属性切换 div。

您可以在 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'));