-
Notifications
You must be signed in to change notification settings - Fork 206
Commit
- Loading branch information
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
|
||
.normal { | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,97 @@ | ||
import React, { Component } from 'react'; | ||
import { Modal, Form, Input } from 'antd'; | ||
import styles from './UserModal.css'; | ||
|
||
const FormItem = Form.Item; | ||
|
||
class UserEditModal extends Component { | ||
|
||
constructor(props) { | ||
super(props); | ||
this.state = { | ||
visible: false, | ||
}; | ||
} | ||
|
||
showModelHandler = (e) => { | ||
This comment has been minimized.
Sorry, something went wrong.
This comment has been minimized.
Sorry, something went wrong. |
||
if (e) e.stopPropagation(); | ||
This comment has been minimized.
Sorry, something went wrong.
rockallite
|
||
this.setState({ | ||
visible: true, | ||
}); | ||
}; | ||
|
||
hideModelHandler = () => { | ||
this.setState({ | ||
visible: false, | ||
}); | ||
}; | ||
|
||
okHandler = () => { | ||
const { onOk } = this.props; | ||
this.props.form.validateFields((err, values) => { | ||
if (!err) { | ||
onOk(values); | ||
this.hideModelHandler(); | ||
} | ||
}); | ||
}; | ||
|
||
render() { | ||
const { children } = this.props; | ||
const { getFieldDecorator } = this.props.form; | ||
const { name, email, website } = this.props.record; | ||
const formItemLayout = { | ||
labelCol: { span: 6 }, | ||
wrapperCol: { span: 14 }, | ||
}; | ||
|
||
return ( | ||
<span> | ||
<span onClick={this.showModelHandler}> | ||
This comment has been minimized.
Sorry, something went wrong.
This comment has been minimized.
Sorry, something went wrong. |
||
{ children } | ||
</span> | ||
<Modal | ||
title="Edit User" | ||
visible={this.state.visible} | ||
onOk={this.okHandler} | ||
onCancel={this.hideModelHandler} | ||
> | ||
<Form horizontal onSubmit={this.okHandler}> | ||
This comment has been minimized.
Sorry, something went wrong.
BoyInWindows
|
||
<FormItem | ||
{...formItemLayout} | ||
label="Name" | ||
> | ||
{ | ||
getFieldDecorator('name', { | ||
initialValue: name, | ||
})(<Input />) | ||
} | ||
</FormItem> | ||
<FormItem | ||
{...formItemLayout} | ||
label="Email" | ||
> | ||
{ | ||
getFieldDecorator('email', { | ||
initialValue: email, | ||
})(<Input />) | ||
} | ||
</FormItem> | ||
<FormItem | ||
{...formItemLayout} | ||
label="Website" | ||
> | ||
{ | ||
getFieldDecorator('website', { | ||
initialValue: website, | ||
})(<Input />) | ||
} | ||
</FormItem> | ||
</Form> | ||
</Modal> | ||
</span> | ||
); | ||
} | ||
} | ||
|
||
export default Form.create()(UserEditModal); |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -10,3 +10,10 @@ export function remove(id) { | |
method: 'DELETE', | ||
}); | ||
} | ||
|
||
export function patch(id, values) { | ||
return request(`/api/users/${id}`, { | ||
method: 'PATCH', | ||
body: JSON.stringify(values), | ||
This comment has been minimized.
Sorry, something went wrong.
yftan
|
||
}); | ||
} |
8 comments
on commit ed7a4ee
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
请教一下大神:
- 需要注意的一点是,我们在这里如何处理 Modal 的 visible 状态,有几种选择:
- 存 dva 的 model state 里
- 存 component state 里
- 另外,怎么存也是个问题,可以:
- 只有一个 visible,然后根据用户点选的 user 填不同的表单数据
- 几个 user 几个 visible
- 此教程选的方案是 2-2,即存 component state,并且 visible 按 user 存。另外为了使用的简便,封装了一个 UserModal 的组件。
- 完成后,切换到浏览器,应该就能对用户进行编辑了。
这段话中的“只有一个 visible,然后根据用户点选的 user 填不同的表单数据”和“几个 user 几个 visible”怎么理解?分别的意义是什么?在代码中哪一块体现了几个user几个visible的实现?
谢谢。 @sorrycc
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- “只有一个 visible,然后根据用户点选的 user 填不同的表单数据”
只有一个 modal 实例,多条记录共用一个 modal 实例
- “几个 user 几个 visible”
多个 modal 实例,每条记录会产生单独的一个 modal 实例
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
觉得2-2这种实现模态框展示和隐藏的方式比较好写。
现在公司有用1-1的方式的,组件-action-effect来回跳转,比较麻烦,虽然这样看来各个状态都在dva里面的model内进行管理,但是不免有些繁琐
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Cannot read property 'id' of undefined 改动后开始报这个错误 很不理解 求讲解
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@wkm-wangZhe 你可能是把 render: (text, record) => (
写成了 render: (text, {record}) => (
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
我想问如何使编辑生效,现在编辑完后无法修改,还是原来的数据
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
我想问如何使编辑生效,现在编辑完后无法修改,还是原来的数据
因为编辑用的是模拟数据啊,编辑了确实是没生效的,看请求发成功就可以了,要是想真正的修改就自己做数据库
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
觉得2-2这种实现模态框展示和隐藏的方式比较好写。
现在公司有用1-1的方式的,组件-action-effect来回跳转,比较麻烦,虽然这样看来各个状态都在dva里面的model内进行管理,但是不免有些繁琐
求深解
这里命名好像有点问题,应该是showModalHandler吧?后面也有类似的情况