單擊按鈕時顯示2個組件中的1個

Question

在父組件上，我嘗試執行2個按鈕，每個按鈕將顯示一個組件，第一個按鈕顯示itemlist，第二個組件顯示itemlist2，但我似乎無法正確理解，我嘗試按照此示例（ https ：//codepen.io/PiotrBerebecki/pen/yaVaLK ），盡管我不確定它是否適合此類功能的正確資源，這是我的app.js代碼

  class App extends Component {
  state = {
    one: false
  };

  handleClick(e) {
    const userChoice = e.target.className;
    this.setState({
      userChoice
    });
  }

  toggleDiv() {
    this.setState({
      one: !this.state.one
    });
  }

  toggleDiv1() {
    this.setState({
      one: this.state.one
    });
  }

  render() {
    return (
      <div>
        <NavBar />
        <div className="container-fluid">
          <ServiceSelector toggleDiv={this.toggleDiv.bind(this)} toggleDiv1= 
          {this.toggleDiv1.bind(this)} />
          {this.state.one == false ? <ItemList /> : <ItemList2 />}
        </div>
      </div>
    );
  }
}

class ServiceSelector extends React.Component {
  toggleDiv() {
    this.props.toggleDiv();
  }
  toggleDiv2() {
    this.props.toggleDiv2();
  }

  render() {
    return (
      <div>
        {" "}
        <button onClick={this.toggleDiv.bind(this)}>sss </button>
        <button onClick={this.toggleDiv1.bind(this)}>sss </button>
      </div>
    );
  }
}

Answer 1

其實這個功能

toggleDiv1() {
  this.setState({
    one: this.state.one
  });
}

是沒用的。

切換功能應具有一個

toggleFunc() {
  this.setState({stateWatched = !this.state.stateWatched})
}

兩種情況都使用此函數（設置true或false ）。 並且在ServiceSelector組件中調用時不要bind ，這是無意義的。

 class App extends Component { state = { one: false }; handleClick(e) { const userChoice = e.target.className; this.setState({ userChoice }); } toggleDiv() { this.setState({ one: !this.state.one }); } render() { return ( <div> <NavBar /> <div className="container-fluid"> <ServiceSelector toggleDiv={this.toggleDiv.bind(this)} /> {this.state.one == false ? <ItemList /> : <ItemList2 />} </div> </div> ); } } class ServiceSelector extends React.Component { render() { return ( <div> {" "} <button onClick={this.props.toggleDiv}>sss </button> </div> ); } } 

如果要有2個按鈕來處理切換。 更改功能的邏輯。

function toggleTrue() {
  this.setState({one: true})
}

function toggleFalse() {
  this.setState({one: false})
}

然后像往常一樣傳遞它（記住要刪除子組件中的bind函數）

Answer 2

我不太確定您要做什么，但我會嘗試一下。

class App extends Component {
  state = {
    one: false
  };

  handleClick(e) {
    const userChoice = e.target.className;
    this.setState({
      userChoice
    });
  }

  toggleDiv = () => {
    this.setState({
      one: !this.state.one
    });
  }

  toggleDiv1 = () => {
    this.setState({
      one: this.state.one
    });
  }

  render() {
    return (
      <div>
        <NavBar />
        <div className="container-fluid">
          <ServiceSelector toggleDiv={this.toggleDiv} toggleDiv1={this.toggleDiv1} />
          {this.state.one == false ? <ItemList /> : <ItemList2 />}
        </div>
      </div>
    );
  }
}

class ServiceSelector extends React.Component {

  render() {
    return (
      <div>
        {" "}
        <button onClick={this.props.toggleDiv}>sss </button>
        <button onClick={this.props.toggleDiv1}>sss </button>
      </div>
    );
  }
}

使用箭頭功能消除了鍵入this.bind的需要，因為它為您完成了綁定

讓我知道是否有幫助