美文网首页
react antd Form 初始数据

react antd Form 初始数据

作者: 半夜成仙 | 来源:发表于2020-07-07 23:45 被阅读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);
        }
    
    

    相关文章

      网友评论

          本文标题:react antd Form 初始数据

          本文链接:https://www.haomeiwen.com/subject/wbtxcktx.html