如何在狀態中使用切換？

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