javascript - 我的钩子没有打开和关闭我的模态
问题描述
我是 react 和 redux 的新手,我正在尝试以新的钩子方式做事,并遇到使用 redux 状态打开和关闭 Modal 的问题。
基本上,一旦我的页面加载,模式就会打开,即使切片中的初始状态设置为 false 并且模式页脚中的关闭按钮不会关闭它。
我正在尝试从编译的示例中学习,npx create-react-app redux-demo --template redux
但我显然遗漏了一些东西。
谢谢!
AffinityModal.js
import React from 'react';
import { Button, Form, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row, } from 'reactstrap';
import { affinOpen, toggleAffinAsync } from '../modalSlice'
import { useDispatch } from 'react-redux';
function AffinityModal() {
const dispatch = useDispatch();
return (
<Modal isOpen={affinOpen} toggle={() => dispatch(toggleAffinAsync())}>
<ModalHeader>
<h5 className="modal-title" id="exampleModalLabel">New Ingredient Affinity</h5>
<Button data-dismiss="modal" aria-label="Close" className="close">
<span aria-hidden="true">×</span>
</Button>
</ModalHeader>
<ModalBody>
<div className="container-fluid">
<Form>
<FormGroup>
<Row>
<div className="col-12">
<Label for="mainIngName" className="col-form-label">Main Ingredient:</Label>
</div>
</Row>
<Row>
<div className="col-12">
<Input readOnly type="text" id="mainIngName"></Input>
</div>
</Row>
</FormGroup>
<FormGroup>
<Row>
<div className="col-12">
<Label for="added-ing-text" className="col-form-label">Combines Well With:</Label>
</div>
</Row>
<Row id="secondaryIngs">
<div className="col-10">
<Input type="text" id="added-ing-text" className="secIngInputs"></Input>
</div>
<div className="col-2">
<Button id="ingPlusButton">+</Button>
</div>
</Row>
</FormGroup>
</Form>
</div>
</ModalBody><ModalFooter>
<Button data-dismiss="modal" onClick={() => dispatch(toggleAffinAsync())} color="secondary">Close</Button>
<Button id="submitNewIngButton" color="primary" className="submitButton">Submit</Button>
</ModalFooter>
</Modal >
)
}
导出默认 AffinityModal
modalSlice.js
import { createSlice } from '@reduxjs/toolkit';
export const modalSlice = createSlice({
name: 'openAffinityModal',
initialState: {
isAffinityModalOpen: false,
isRecipeModalOpen: false
},
reducers: {
toggleAffinityModal: state => {
state.isAffinityModalOpen = !state.isAffinityModalOpen
},
toggleRecipeModal: state => {
state.isRecipeModalOpen = !state.isRecipeModalOpen
}
}
})
export const { toggleAffinityModal, toggleRecipeModal } = modalSlice.actions;
export const toggleAffinAsync = isAffinityModalOpen => dispatch => {
dispatch(toggleAffinityModal);
};
// The function below is called a selector and allows us to select a value from
// the state. Selectors can also be defined inline where they're used instead of
// in the slice file. For example: `useSelector((state) => state.counter.value)`
//useSelector((state) => state.openAffinityModal.isAffinityModalOpen)
export const affinOpen = state => state.openAffinityModal.isAffinityModalOpen;
export default modalSlice.reducer;
解决方案
你根本不需要toggleAffinAsync
。只需使用常规动作创建器toggleAffinityModal
。
affinOpen
是一个选择器函数。它不是一个值。现在你Modal
的总是打开的,因为你正在将此函数传递给isOpen
prop 并且 a在转换为 a时function
是真实boolean
的。
为了boolean
从状态中获取值,您需要调用 affinOpen
with useSelector
。
function AffinityModal() {
const dispatch = useDispatch();
const isOpen = useSelector(affinOpen);
return (
<Modal isOpen={isOpen} toggle={() => dispatch(toggleAffinityModal())}>
...
推荐阅读
- python - Python Selenium,抓取 LinkedIn:循环工作和教育历史
- kotlin - 是否可以组成两个密封类?
- ruby - 通过返回 true 而非值的符号键访问 Ruby 哈希值
- jquery - Safari 中的 Bootstrap Datapicker 问题
- c++ - 对未知边界数组的引用 (C++)
- powershell - 需要帮助将 ping 结果写入分离文件以供上下机器使用
- java - Android java.io.IOException: grpc 失败
- python - 从 df 列的列表中过滤期望值
- javascript - 应用级拦截的电子代理设置
- python - 如何在 Pandas 中对日期时间列进行分组?