Два состояния переключения? - PullRequest
Новая
       9

Два состояния переключения?

0 голосов
/ 31 января 2019

У меня есть два переключателя, которые мешают друг другу.Я использую реактивный ремешок и реактивный аккордеонный компонент.Как установить два разных состояния?

Прямо сейчас, когда я нажимаю на любом аккордеоне или на кнопке для моего модального огня, я открываю аккордеон и показываю модал.Я новичок в 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>

1 Ответ

0 голосов
/ 31 января 2019

Проблема в том, что это 

    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 в зависимости от того, что вы хотите, но используйте один для модального, а другой для аккордеона.У вас не может быть двух функций с одинаковым именем, иначе они будут перезаписывать друг друга

...