react antd Form 初始数据

2020-07-07  本文已影响0人  半夜成仙

从表格获取的数据初始到表单----修改

import moment from 'moment';
#设置中文操作
import locale from 'antd/lib/date-picker/locale/zh_CN';
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
#
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';


 <Form
                       labelCol={{ span: 6 }}
                       wrapperCol={{ span: 14 }}
                       layout="horizontal"
                       onFinish={this.onFinish}
#初始数据, initialValues 的key 与Form.Item 的name 的要一样
                       initialValues={{
                           task_name: data.task_name,
                           task_type:data.task_type,
                           task_reward:data.task_reward,
                           task_time:[moment('2019/10/15', dateFormat)  ,moment('2020/07/16', dateFormat)] ,#时间的先这么写

                           task_rules:data.task_rules,
                       }}
                   >
                       <Form.Item name='task_name' label="任务名称">
                           <Input  placeholder="large size"  />
                       </Form.Item>
                       <Form.Item name='task_type' label="Select">
                           <Select>
                               <Option value="新手任务" defaultValue>新手任务</Option>
                               <Option value="日常任务" defaultValue>日常任务</Option>
                               <Option value="活动任务" defaultValue>活动任务</Option>
                           </Select>
                       </Form.Item>
                       <Form.Item name='task_reward' label="任务奖励">
                           <Input  placeholder="large size" />
                       </Form.Item>
                       <Form.Item name='task_time' label="有效期">

                           <RangePicker
                               locale={locale} # 设置中文
                               onChange={this.onChange}
                           />

                       </Form.Item>
                       <Form.Item name='task_rules' label="任务规则">
                           <Input  placeholder="large size"/>
                       </Form.Item>
                       <Button type="primary" htmlType="submit"                 
                                  className="login-form-button">
                           Log in
                       </Button>##点击执行onFinish 方法
                   </Form>







 onFinish = values => {
        console.log('Received values of form: ', values);
    }

上一篇下一篇

猜你喜欢

热点阅读