Question

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

Answer 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

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

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

2 个答案: