Reactjs 两种状态？

我有两个相互干扰的开关。我使用的是react和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 (
  ...

模态代码：

<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>

问题是这个

    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，但一个用于模态，另一个用于手风琴。你不能有两个同名的函数，否则它们会互相覆盖