北风吹寒

  • 主页
  • 个人例子
所有文章 友链 关于我
    

北风吹寒

  • 主页
  • 个人例子

如何省心的使用Antd的Modal

2017-07-21

由于Antd的Modal的显示和隐藏是通过css实现的,
所以在和antd
Form结合的时候隐藏Form的时候整个Form组件其实还存在,并没有被mount掉,
然后就会出现如何把上次的状态撤销的问题,
再就会为了更新状态写一些代码来处理。 让整个Form组件变的非常凌乱

//antd 官网Modal

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import { Modal, Button } from 'antd';
class App extends React.Component {
state = { visible: false }
showModal = () => {
this.setState({
visible: true,
});
}
handleOk = (e) => {
console.log(e);
this.setState({
visible: false,
});
}
handleCancel = (e) => {
console.log(e);
this.setState({
visible: false,
});
}
render() {
return (
<div>
<Button type="primary" onClick={this.showModal}>Open</Button>
<Modal
title="Basic Modal"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
</div>
);
}
}
ReactDOM.render(<App />, mountNode);

重构一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import { Modal, Button } from 'antd';
class App extends React.Component {
state = { visible: false }
showModal = () => {
this.setState({
visible: true,
});
}
handleOk = (e) => {
console.log(e);
this.setState({
visible: false,
});
}
handleCancel = (e) => {
console.log(e);
this.setState({
visible: false,
});
}
renderModal = () => {
if(this.state.visible) {
<Modal
title="Basic Modal"
visible
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
}
}
render() {
return (
<div>
<Button type="primary" onClick={this.showModal}>Open</Button>
{this.renderModal()}
</div>
);
}
}
ReactDOM.render(<App />, mountNode);

这样只要visible是false那么Modal就会被mount掉, visible从false
变成true的话Modal会重新被render 而且会作为一个全新组件进行渲染,
没有以前遗留dom的污染

//将modal里面换成Form

1
2
3
4
5
6
7
8
9
10
if(this.state.visible) {
<Modal
title="Basic Modal"
visible
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<Form record={this.state.reocrd}> {/*这里放一下自己写的子组件, 不限于Form*/}
</Modal>
}

如果有什么缺陷和bug的话, 欢迎朋友指正.

  • react
  • antd

扫一扫,分享到微信

微信分享二维码
react-native run-android Exception in thread “main” java.util.zip.ZipException
reactNative 相册分组的实现
目录,不存在的…
© 2017 北风吹寒
Hexo Theme Yilia by Litten
到访数: , 本页阅读量:
  • 所有文章
  • 友链
  • 关于我

tag:

  • docker
  • 科学上网
  • Hexo
  • react
  • antd
  • node
  • react native
  • 相册

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录(注意不是yilia根目录)执行以下命令:
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置:

      jsonContent:
        meta: false
        pages: false
        posts:
          title: true
          date: true
          path: true
          text: false
          raw: false
          content: false
          slug: false
          updated: false
          comments: false
          link: false
          permalink: false
          excerpt: false
          categories: false
          tags: true
    

  • 在线文档预览的实现使用docker unoconv

    2017-09-01

    #docker

  • Docker 安装ss和ipec2VPN 科学上网

    2017-08-02

    #docker#科学上网

  • 用Docker 打包封装简单的Node服务

    2017-07-29

    #docker#node

  • 解决 DTraceProviderBindings 构建错误

    2017-07-26

    #Hexo

  • React 实现鼠标hover的简单封装

    2017-07-26

    #react

  • ListView 初次加载空白 scroll后显示问题

    2017-07-25

    #react#react native

  • react-native run-android Exception in thread “main” java.util.zip.ZipException

    2017-07-22

    #react native

  • 如何省心的使用Antd的Modal

    2017-07-21

    #react#antd

  • reactNative 相册分组的实现

    2017-07-20

    #react#react native#相册

  • 本站来自哪里

    2017-07-19

    #Hexo

  • 布宝
轻度动漫迷,内向,有向肥宅发展的趋势,打算减肥,已办健身卡.