两种切换状态？答案

【问题标题】：Two toggle states?两种切换状态？
【发布时间】：2019-01-31 14:59:50
【问题描述】：

我有两个相互干扰的切换开关。我正在使用reactstrap modal 和一个反应手风琴组件。如何设置两种不同的状态？

现在，当我单击任何手风琴或我的模态按钮时，我会打开手风琴并显示模态。我是 React 的新手，仅供参考

我的部分组件：

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      activeTab: '1',
      modal: false
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle(tab) {
    if (this.state.activeTab !== tab) {
      this.setState({
        activeTab: tab
      });
    }
  }

  toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }


  render() {
    return (
  ...

模态 Reactstrap 代码：

<div className="row med-spaces">
    <div className="col-1">
        <p className="event-date">Feb. 28</p>
    </div>
    <div className="col-7">
        <h3 className="no-marg">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
        <p className="event-sub no-marg-b">Click the button for modal.</p>
    </div>
    <div className="col-4">
        <a className="event-btn" onClick={this.toggle} href="/"><i></i><span>Submit Order</span></a>
    </div>
</div>

<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
  <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
  <ModalBody>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </ModalBody>
  <ModalFooter>
    <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
    <Button color="secondary" onClick={this.toggle}>Cancel</Button>
  </ModalFooter>
</Modal>

【问题讨论】：

标签： reactjs jsx gatsby

【解决方案1】：

问题是这样的

    this.toggle = this.toggle.bind(this); //function name is "toggle"
    this.state = {
      activeTab: '1',
      modal: false
    };

    this.toggle2 = this.toggle2.bind(this);//function name is "toggle2"
  }

  toggle(tab) { //function name is "toggle"
    if (this.state.activeTab !== tab) {
      this.setState({
        activeTab: tab
      });
    }
  }

  toggle2() { //function name is "toggle2" , NOW, they are different functions
    this.setState({
      modal: !this.state.modal
    });
  }

并根据您的需要在模态调用中切换或切换2，但将一个用于模态，另一个用于手风琴。你不能有两个同名的函数，否则会互相覆盖

【讨论】：