Отображение 1 из 2 компонентов при нажатии кнопки

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).И не bind при вызове компонента ServiceSelector, это чепуха.

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, так как он связывает вас

Дайте мне знать, если это поможет