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的需要，因为它为您完成了绑定

让我知道是否有帮助

单击按钮时显示2个组件中的1个

2 个答案: