Javascript 如何使用一个函数和一个状态切换多个模态？

我使用的是mobx，我有多种模态，比如“menuModal”、“feedbackModal”、“reviewModal”等等。对于每个模式，我都有一个状态“IsMenumModalopen”、“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()
      }}

---

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

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>
            </>
        )
    }
}

---

使用

useState

hook：

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

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

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

const[openModal，setOpenModal]=useState({
菜单：错，
反馈：错，
评论：错，
});
const-toggleModal=modal=>{
setOpenModel（{…OpenModel[modal]：！OpenModel[modal]}）；
};
切换模式（“菜单”）}>；

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

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

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