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);
}