Question

我有两个相互干扰的切换键。我正在使用reactstrap modal和react手风琴组件。您如何设置两个不同的状态？

现在，当我单击任何手风琴或莫代尔的按钮时，我都会开火，然后打开手风琴并显示该莫代尔。我是React FYI的新手

我的组件的一部分：

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>

Answer 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
    });
  }

，并根据需要在模态调用中toggle或toggle2，但是将一个用于模式，将另一个用于手风琴。您不能有两个具有相同名称的函数，否则它们将被彼此覆盖

两种切换状态？

1 个答案: