如何使用一种功能和一种状态切换多个模式？答案

【问题标题】：How toggle multiple modals with one function and one state?如何使用一种功能和一种状态切换多个模式？
【发布时间】：2019-06-10 17:01:42
【问题描述】：

我正在使用 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()
      }}

【问题讨论】：

标签： javascript reactjs mobx-react

【解决方案1】：

是的，您可以通过根据发送的模态名称设置状态变量来实现它，如下所示：

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

【讨论】：

【解决方案2】：

带useState钩子：

const [openModal, setOpenModal] = useState({
  menu: false,
  feedback: false,
  review: false,
});

const toggleModal = modal => {
  setOpenModal({ ...openModal, [modal]: !openModal[modal] });
};

<button onClick={() => toggleModal("menu")}></button>;

【讨论】：