开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

无法在Ant Modal中访问this.setState或this.state确认确定/取消功能

在Ant Modal中无法直接访问this.setState或this.state的原因是，Modal组件是通过React的Portal机制将其渲染到DOM树的其他位置，而不是直接作为组件的子元素。因此，在Modal组件中无法直接访问父组件的状态或方法。

要在Ant Modal中实现确认/取消功能，可以采取以下几种方式：

使用React的Context API：通过创建一个Context，在父组件中定义状态和方法，并通过Context.Provider将其传递给Modal组件。在Modal组件中，使用Context.Consumer来访问父组件的状态和方法，从而实现确认/取消功能。
使用回调函数：在父组件中定义一个回调函数，将其作为props传递给Modal组件。在Modal组件中，通过调用该回调函数来更新父组件的状态，从而实现确认/取消功能。
使用Redux或MobX等状态管理库：在父组件中使用状态管理库来管理状态，并将状态和相关的操作方法通过props传递给Modal组件。在Modal组件中，通过调用相关的操作方法来更新状态，从而实现确认/取消功能。

无论采用哪种方式，都需要在父组件中定义状态和相关的操作方法，并将其传递给Modal组件。具体的实现方式可以根据项目需求和个人偏好进行选择。

关于Ant Design的相关组件和文档，可以参考腾讯云的Ant Design官方文档：https://ant.design/components/modal-cn/

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

如何让用户选择是否离开当前页面？

当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。...⚠️：HTML规范指出在此事件中调用window.alert()，window.confirm()以及window.prompt()方法，可能会失效实践一下在微信公众号编辑器界面，输入一部分内容后，...那么很简单，我们使用antd的Modal组件，以及lodash的deepclone(深拷贝)、_.isEqual(value, other)执行深比较来确定两者的值是否相等。...true; this.setState({ modalVisible: false, }); //进行保存操作的处理，这里可以换成自己点击确认后需要做的操作... ` 结束语遇到问题时候，应该先搜索引擎一波，准确的来说，你的月薪在50K以下，都应该多考虑使用别人的轮子/改造别人的轮子，前端发展到现在已经技术基本稳定

2.1K3 0

React封装共用弹窗组件

基本功能逻辑实现基本对外接口(函数式) const Modal = ({ visible=false, style, width= 520, zIndex=1000,...centered=false, title='title', footer, wrapClassName='', okText='确定', okType=...'primary', cancelText='取消', cancelType='default', closable= true, onOk=() => {},...({ visible: false }) } render() { const { visible } = this.state...modal提示内容 ) } }

1.9K0 0

React后台管理前端系统(基于开源框架开发)起步式

这个系统的搭建背景是这样的，有一个朋友想看到现有系统中的一些,用户数据,新闻数据,只需要看到,短期不需要增删改功能,让我搭建一个简单的后台系统给他看.接到任务作为一个有四年开发经验的人来说这也太简单了吧...但是要从零搭建,时间上划不来,因为需要集成很多东西,基础建设就要耗费很长时间.于是乎在GitHub上一顿搜,Ok 找到了二个比较可靠的项目使用,一个是 ant-design-pro 另一个是antd-admin...二个项目大同小异, 使用的技术栈react，ant-design，dva，Mock 基于 Antd UI 设计语言虽然我对dva和ant-design 了解不深,但我还是准备挑战一下.不入虎穴焉得虎子...每个页面或组件都有可能是两个或更多个组件,组合而来的,而组件的参数也是错综复杂,组件的表现,事件都是有这些参数控制的.除了简单理解这些参数,还需要理解这些组件是怎么组合起来的....; this.setState({ expandForm: !

1.9K2 0

React进阶(5)-分离容器组件,UI组件(无状态组件)

Redux实现了一个todolist,但是代码依旧不够完美,我们继续进行拆分的在本节中,你将学习到,如何拆分容器组件,UI组件(无状态组件),让组件尽可能的保持功能的单一,减少组件的状态的容器组件...(聪明组件) 在使用Redux中,无非就是做两件事情如何获取store的状态(组件中通过getState方法获取),并且初始化组件的状态(在Reducer纯函数中初始化),同时还需要监听store...,让每个组件只专注的做自己的事情例如:在我们上几节代码中的Todolist的代码中,尽管我们把数据已经抽离放到store当中进行存储了的,但是依旧有许多逻辑,组件的渲染都杂糅在一个文件当中的如下代码所示...在组件内部通过getState()方法就可以拿到store里面的数据 this.state = store.getState(); // this环境的绑定 ...结语在React中,对于组件的职责功能划分,并没有严格的条条框框限定,这也并不是React独有的功能,在父组件中获取状态数据,而通过自定义属性props的方式,在组件内部通过this.props或者

1.4K0 0

React进阶(3)-上手实践Redux-如何改变store中的数据

在reducer函数接收的第二个参数action就是接下来要干的事情了在Redux中为了能够查看store中的各个状态,在chrome浏览器需先安装一个redux Devtools这个调试工具当然安装这个插件...,第二种方法比较强大,推荐使用,这种配置完后,在各个浏览器都是可以使用的,至于其他一些额外拓展功能的,在后续的文章中,会不断会讲到具体更改store的实例代码如下所示: import React from...在组件内部通过getState()方法就可以拿到store里面的数据 this.state = store.getState(); // this环境的绑定 ...当执行上述的操作后,当组件想要感知store的变化,需要在constructor函数内或者componentWillMount(在react17版本中将会被废弃)或componentDidMount生命周期函数内调用...最后在组件移除时,销毁时,在componentWillUnmount中取消store的订阅事件 // 组件卸载,移除时调用该函数,一般取消,清理已注册的订阅,定时器的清理,取消网络请求,在这里面操作

2.6K3 0

记Ant Design Vue Modal组件的使用及踩的坑

Modal } from 'ant-design-vue'; Antd 的安装和配置我就不赘述了，详情见官方API：在 vue-cli 3 中使用在使用之前，必须要先注册组件： Vue.component...width="80%" 确定按钮文字： okText="确认" 取消按钮文字： cancelText="取消" 禁止点击蒙层（遮罩）关闭： :maskClosable="false" 确认按钮样式：...okType="link" 确认按钮样式，同 Button ，有 primary dashed danger link 四种样式嗯，Antd 只有确认按钮的自定义样式，取消按钮没有，那么就会出现下面这样的情况...然后给按钮绑定“确定”和“取消”事件。...确定：@click="handleOk" 取消：@click="handleCancle" 以我上图的样式为例： .Vue 代码： <a-modal :closable="

22.6K3 2

React进阶(5)-分离容器组件,UI组件(无状态组件)

Redux实现了一个todolist,但是代码依旧不够完美,我们继续进行拆分的在本节中,你将学习到,如何拆分容器组件,UI组件(无状态组件),让组件尽可能的保持功能的单一,减少组件的状态的 · 正...· 文 · 来 · 啦 · ♚ 容器组件(聪明组件) 在使用Redux中,无非就是做两件事情如何获取store的状态(组件中通过getState方法获取),并且初始化组件的状态(在Reducer...在组件内部通过getState()方法就可以拿到store里面的数据 this.state = store.getState(); // this环境的绑定...关于state状态通过容器组件来获取,然后通过props传递给UI组件,让组件更少的涉及到状态的维护,避免分散在各个组件中结语在React中,对于组件的职责功能划分,并没有严格的条条框框限定,这也并不是...React独有的功能,在父组件中获取状态数据,而通过自定义属性props的方式,在组件内部通过this.props或者props进行接收,这样能够减少组件的状态分散在各处的【自我介绍】作者:川川

9571 0

2022高频前端面试题（附答案）

类组件(Class component)和函数式组件(Functional component)之间有何不同类组件不仅允许你使用更多额外的功能，如组件自身的状态和生命周期钩子，也能使组件直接访问 store...如果确定在 state 或 props 更新后组件不需要在重新渲染，则可以返回false，这是一个提高性能的方法。...componentDidUpdate：它主要用于更新DOM以响应props或state更改。componentWillUnmount：它用于取消任何的网络请求，或删除与组件关联的所有事件监听器。...一般情况下，只有在不支持 HTML5 history API 的浏览器中使用此功能；getUserConfirmation 用于确认导航的函数，默认使用 window.confirm。...例如，当从 /a 导航至 /b 时，会使用默认的 confirm 函数弹出一个提示，用户点击确定后才进行导航，否则不做任何处理；// 这是默认的确认函数const getConfirmation = (

2.4K4 0

React组件库封装初探--Modal

固定定位布局，全屏遮盖显示，所以内容自定义实现功能目标：两种调用方式一些内容、Modal.confirm({...props}) 遮罩层...method()是Modal的方法即先给组件Modal增加对应方法，返回一个对象；通过在method(props)方法中将其方法参数作为组件Modal的props传入，并render（Modal）...()调用形式可使用的配置props与中的配置项和默认值有所不同；如Modal.confirm({})中不可配置footer;Modal.info({})的footer底部默认应该为一个...button,且默认值为我知道了；再如Modal.method()不需要传递visible，而形式需要传入；再比如Modal.method()中没有children，而使用...= Modal.confirm({ title: '你确定需要删除该项么?'

5.1K1 0

React进阶(3)-上手实践Redux-如何改变store中的数据

在reducer函数接收的第二个参数action就是接下来要干的事情了在Redux中为了能够查看store中的各个状态,在chrome浏览器需先安装一个redux Devtools这个调试工具当然安装这个插件...,第二种方法比较强大,推荐使用,这种配置完后,在各个浏览器都是可以使用的,至于其他一些额外拓展功能的,在后续的文章中,会不断会讲到具体更改store的实例代码如下所示: import React from...在组件内部通过getState()方法就可以拿到store里面的数据 this.state = store.getState(); // this环境的绑定...当执行上述的操作后,当组件想要感知store的变化,需要在constructor函数内或者componentWillMount(在react17版本中将会被废弃)或componentDidMount生命周期函数内调用...最后在组件移除时,销毁时,在componentWillUnmount中取消store的订阅事件 // 组件卸载,移除时调用该函数,一般取消,清理已注册的订阅,定时器的清理,取消网络请求,在这里面操作

2.2K2 0

Sweet Alert弹窗插件的安装及使用详解笔记

通过设置 dangerMode 为 true ，焦点将在“取消”按钮而不是“确认”按钮上，并且“确认”按钮将为红色以强调危险操作。 swal({ title: "你确定吗?"...如果要显示并自定义取消按钮，可以设置 buttons 为一个字符串数组，其中第一个值是“取消”按钮的文本，第二个值是“确认”按钮的文本： swal("你确定要这么做吗？"...在上面的示例中，我们了解到如何将 content 选项值设置 "input" ，在模态框中加入元素，该元素根据输入的值，变换“确认”按钮需要的解析值。... ) JSX 语法取代了 modal 的 content 选项，您仍然可以使用 SweetAlert 的其他功能。 ...您可以只传入一个字符串（默认情况下它会更改确认按钮的值）或一个对象。

9.2K1 0

React进阶(4)-拆分Redux-将store,Reducer,action,actionTypes独立管理

image.png 前言在前面的几小节中已经完成了一个todolist的添加,删除的操作,通过把组件的数据放到了Redux中的公共存储区域store中去存储,在Redux中进行状态数据的更新修改...在组件内部通过getState()方法就可以拿到store里面的数据 this.state = store.getState(); // this环境的绑定...在组件内部通过getState()方法就可以拿到store里面的数据 this.state = store.getState(); // this环境的绑定 ...在组件内部通过getState()方法就可以拿到store里面的数据 this.state = store.getState(); // this环境的绑定 ...在实际开发当中,至于拆分的顺序,不一定按照我这种方式的,合适的流程应当时,先创建store,然后在创建reducer,确定要做什么事情,编写action,拆分action代码,其中获取store就用

1.9K1 1

React进阶(4)-拆分Redux-将store,Reducer,action,actionTypes独立管理

撰文 | 川川前言撰文:川川在前面的几小节中已经完成了一个todolist的添加,删除的操作,通过把组件的数据放到了Redux中的公共存储区域store中去存储,在Redux中进行状态数据的更新修改...在组件内部通过getState()方法就可以拿到store里面的数据 this.state = store.getState(); // this环境的绑定...在组件内部通过getState()方法就可以拿到store里面的数据 this.state = store.getState(); // this环境的绑定...在组件内部通过getState()方法就可以拿到store里面的数据 this.state = store.getState(); // this环境的绑定...在实际开发当中,至于拆分的顺序,不一定按照我这种方式的,合适的流程应当时,先创建store,然后在创建reducer,确定要做什么事情,编写action,拆分action代码,其中获取store就用getState

1.7K1 0

2021前端react高频面试题

如果确定在 state 或 props 更新后组件不需要在重新渲染，则可以返回false，这是一个提高性能的方法。...componentWillUpdate：在shouldComponentUpdate返回 true 确定要更新组件之前件之前执行。...componentDidUpdate：它主要用于更新DOM以响应props或state更改。 componentWillUnmount：它用于取消任何的网络请求，或删除与组件关联的所有事件监听器。...（或全部）属性的新对象非常方便，在更新state 咱们就经常这么做： this.setState(prevState => { return {foo: {...prevState.foo,...为什么浏览器无法读取JSX？** 浏览器只能处理 JavaScript 对象，而不能读取常规 JavaScript 对象中的 JSX。

7620 0

2022前端开发社招React面试题附答案

componentDidMount：在第一次渲染之后执行，可以在这里做AJAX请求，DOM 的操作或状态更新以及设置事件监听器。...如果确定在 state 或 props 更新后组件不需要在重新渲染，则可以返回false，这是一个提高性能的方法。...componentWillUpdate：在shouldComponentUpdate返回 true 确定要更新组件之前件之前执行。...componentDidUpdate：它主要用于更新DOM以响应props或state更改。 componentWillUnmount：它用于取消任何的网络请求，或删除与组件关联的所有事件监听器。...为什么浏览器无法读取JSX？浏览器只能处理 JavaScript 对象，而不能读取常规 JavaScript 对象中的 JSX。

7573 0

使用ant design开发完整的后台系统

add ant-design-vue 之后我们就直接在main.js文件中全局引入 // main.js import Vue from 'vue' import Antd from 'ant-design-vue...port: PORT, https: false, hotOnly: false, proxy: { // 配置跨域 '/api': { //要访问的跨域的...postNginxPortItem, deleteNginxPortItem } from '@/services/port'; import moment from 'moment'; const { confirm } = Modal...loading: false, }); }); }; // 改变表格 onchange = (pagination: any) => { this.setState...后话嗯~ 根据实际情况增加功能，比如图表展示你要选啥实现:echart, bizchart...等等在使用vue和react版本的ant design开发后台系统，自己还是比较偏向使用react ant

2.5K2 0

React-Native踩坑记

这个时候应该开启模拟器的项目热加载功能。做法如下：模拟器中进入正在执行的项目，然后在mac上按住command + d就可以调出对话框，选择Enable Live Reload就可以了。...在父组件中设置了父组件的数据变动了，但是子组件的数据并没有变动。...> 复制代码出现在子组件中数据没变动的话，应该在子组件中做下面的处理：在componentWillReceiveProps...props); this.state = { name : '' } } Fn() { this.setState({ name: 'jiaming' }) } 上面的setState...type flag is two : null } ) } 复制代码使用Modal会遮住下层的内容在开始时候，引入Modal

2.3K3 0

React 函数组件

在项目中最常用的 hook 如 useState、useEffect 以及 useRef。...= { count: 0, }; } render() { const { count } = this.state; return ( ...{count} this.setState({ count: count + 1 })}>add</button...modal 和 form 组件 Modal 和 Form 一起配合使用时，设置 destroyOnClose 也不会在 Modal 关闭时销毁表单字段数据，需要设置 Form 组件的 preserve...button" onClick={onCancel} style={{ margin: "0 8px" }} > 取消

1.2K3 0

浅谈 React 组件设计

封装 DOM 结构在一些最简单无脑的 jQuery 插件中，它们一般会将 DOM 结构直接写死到插件中，这样的插件拿来即用，但限制也比较大，我们无法修改插件的 DOM 结构。...很明显，我们在开发中应当使用松耦合的方式来设计组件，这样不仅提供了复用性，还方便了测试。...这就是 Ant Design 的实现思路。在前面数据解耦中我们就讲过了类似的思路，实际上数据解耦和结构自由是相辅相成的。...在设计一个组件的时候，很多人往往会陷入一种怪圈，那就是我该怎么才能封装更多功能？怎么才能兼容不同的渲染？这时候我们就不妨换一种思路，如果将渲染交给使用者来控制呢？...在组件设计的学习中，你需要多探索、实践，多去参考社区知名的组件库，比如 Ant Design、Element UI、iview 等等，去思考他们为什么会这样设计，有没有更好的设计？

1.1K1 0

React-Native踩坑记

这个时候应该开启模拟器的项目热加载功能。做法如下：模拟器中进入正在执行的项目，然后在mac上按住command + d就可以调出对话框，选择Enable Live Reload就可以了。...在父组件中设置了父组件的数据变动了，但是子组件的数据并没有变动。...> 复制代码出现在子组件中数据没变动的话，应该在子组件中做下面的处理：在componentWillReceiveProps...(props); this.state = { name : '' } } Fn() { this.setState({ name: 'jiaming' }) } 复制代码上面的setState...type flag is two : null } ) } 复制代码使用Modal会遮住下层的内容在开始时候，引入Modal

2K0 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭