问题分析
需求
:对表格一行部分数据进行修改,利用antd
的Modal
实现。
目的
:将数据初始值体现在modal
表单Form
中。
动机
:提高用户体验。
以下是待修改的表单Form
。由图可知,原始数据没有体现在Form
中。
解决方法
将每一条数据存在state
中,每次点击表格不同行,调用setState
更新数据。
查询官网和其他资料(链接见文末)
点击事件改变Modal
的visible
,从state
中取出allowLateSubmission
和allowRepeatSubmission
利用setFieldsValue
函数将其渲染在Modal
中的Form
里。
//显示Modal
showAssignModal = () => {
const { setFieldsValue } = this.props.form;
const { allowLateSubmission = true, allowRepeatSubmission = true } = this.state;
setFieldsValue({ "allowLateSubmission": allowLateSubmission });
setFieldsValue({ 'allowRepeatSubmission': allowRepeatSubmission });
this.setState({
assignedModalVisible: true,
});
};
从state
中取出deadline
,利用moment
将时间格式化,作为DatePicker
的初始值initialValue
const { deadline = 'YYYY-MM-DD HH:mm:ss' }} = this.state;//从state中取出数据,
<FormItem {...formItemLayout} label="截止时间:">
{getFieldDecorator('deadline', {
rules: [
{
required: true,
message: '请选择截止时间!',
},
],
initialValue: moment(deadline, 'YYYY-MM-DD HH:mm:ss'),
})(
<DatePicker
format="YYYY-MM-DD HH:mm:ss"
disabledDate={this.disabledDate}
showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
/>
)}
</FormItem>
以下是最终效果图,问题解决。
问题总结
以上仅为个人实践得来的结果,实现了功能,但是更深层次尚需深入理解运用。
setTimeout用法
setTimeout( )
是属于 window
的 method
, 用来设定一个时间, 时间到了, 就会执行一个指定的 method
。简称定时器
。
参考文档
antd官网 Form表单
在react中对自己的组件使用setFieldsValue
Ant Design Pro,用setFieldsValue方法,给嵌套到Form表单中的DatePicker或RangePicker组件设置默认值
JS中setTimeout()的用法详解