代码之家 › 专栏 › 技术社区 › Janssonn

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

state reactjs javascript

Janssonn · 技术社区 · 6 年前

我没有使用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}>

我希望切换按钮显示/隐藏即将出现的div(这只是文本的一个示例,无法单独工作)

3 回复 | 直到 6 年前

AndrewL64 6 年前

要根据状态切换div,您可以:

; 从内部的setState属性 toggleNavbar .
React不允许对属性名称进行大小写。改变 isOpen 到 isopen 在你的 #navbarSupportedContent 部门。
指定一个字符串而不是布尔值作为属性值,并在此基础上相应地更改div的css。

在本文中,您可以使用上面的css和html查看一个实际示例 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>
                <div id="navbarSupportedContent" isopen={isOpen ? "open" : "close"}>
                    <p>Hello World</p>
                </div>
            </div>
        )
    }
 }

ReactDOM.render(<App />, document.getElementById('main'));

或者你可以使用 && operator

删除分号 ; 从内部的setState属性 托格伦纳夫巴 .
使用 &&操作人员 根据所选参数切换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'));

Tarreq 6 年前

由于您使用的是箭头函数,因此只需定义属性,如:

onclick={this.toggleNavbar}>

Åukasz BlaszyÅski 6 年前

看这把小提琴,它很好用: https://jsfiddle.net/y5gqrf02/1/

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

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