Как переключить несколько модалов с одной функцией и одним состоянием? - PullRequest
Новая
       7

Как переключить несколько модалов с одной функцией и одним состоянием?

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

Я использую mobx, и у меня есть несколько модалов, таких как "menuModal", "feedbackModal", "reviewModal" и еще пара. Для каждого модального режима у меня есть состояние "isMenuModalOpen", "isFeedbackModalOpen", "isReviewModalOpen". В зависимости от состояния модалы открываются или закрываются. И для каждого состояния у меня есть функция, которая переключает состояние при нажатии. Возможно ли использовать только одну функцию и одно состояние для обработки всех этих модалов? 

@observable public isFeedbackModalOpen = false
@observable public isReviewModalOpen = false
@observable public isMenuModalOpen = false


@action.bound
public menuModalToggle() {
this.isMenuModalOpen = !this.isMenuModalOpen
}
@action.bound
public feedbackModalToggle() {
this.isFeedbackModalOpen = !this.isFeedbackModalOpen
}
@action.bound
public feedbackModalToggle() {
this.isReviewModalOpen = !this.isReviewModalOpen
}

onClick={() => {
        this.props.store.modal.feedbackModalToggle()
      }}

1 Ответ

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

Да, вы могли бы достичь этого, установив переменную состояния в зависимости от имени отправляемого модала, например: 

switchModal = modal => ev => {
    this.setState(prevState => ({ [modal]: !prevState[modal] }))
}

А затем свяжите свою функцию onClick следующим образом. Это установит функцию, привязанную к onClick с заданным первым значением: 

class ModalOpener extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            feedback: false,
            review: false,
            menu: false
        }
    }

    switchModal = modal => ev => {
        this.setState(prevState => ({ [modal]: !prevState[modal] }))
    }

    render() {
        return(
            <>
                <button onClick={this.switchModal('feedback')}>A</button>
                <button onClick={this.switchModal('review')}>B</button>
                <button onClick={this.switchModal('menu')}>C</button>
            </>
        )
    }
}

Теперь вы можете получить доступ к каждому значению следующим образом: 

const { feedback, review, menu } = this.state
...