antd中:React为Form中的Radio和DatePicker设置初始值

问题分析

需求:对表格一行部分数据进行修改,利用antdModal实现。
目的:将数据初始值体现在modal表单Form中。
动机:提高用户体验。
以下是待修改的表单Form。由图可知,原始数据没有体现在Form中。
在这里插入图片描述

解决方法

将每一条数据存在state中,每次点击表格不同行,调用setState更新数据。
查询官网和其他资料(链接见文末)

点击事件改变Modalvisible,从state中取出allowLateSubmissionallowRepeatSubmission 利用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( ) 是属于 windowmethod, 用来设定一个时间, 时间到了, 就会执行一个指定的 method。简称定时器

参考文档

antd官网 Form表单
在react中对自己的组件使用setFieldsValue
Ant Design Pro,用setFieldsValue方法,给嵌套到Form表单中的DatePicker或RangePicker组件设置默认值

JS中setTimeout()的用法详解

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Antd3,可以使用`Form`组件和`FormItem`组件来创建表单。具体步骤如下: 1. 引入`Form`和`FormItem`组件以及需要的表单控件组件。 ```jsx import { Form, Input, Button } from 'antd'; const FormItem = Form.Item; ``` 2. 定义表单的初始值和验证规则。 ```jsx const initialValues = { username: '', password: '', }; const validateRules = { username: [{ required: true, message: 'Please input your username!' }], password: [{ required: true, message: 'Please input your password!' }], }; ``` 3. 在组件使用`Form`组件,并在其添加`FormItem`组件和表单控件组件。其,`getFieldDecorator`方法用来连接表单控件和表单数据,并设置验证规则。 ```jsx const MyForm = () => { const [form] = Form.useForm(); const handleSubmit = (e) => { e.preventDefault(); form.validateFields((err, values) => { if (!err) { console.log('Received values of form: ', values); } }); }; return ( <Form form={form} initialValues={initialValues} onSubmit={handleSubmit}> <FormItem label="Username"> {form.getFieldDecorator('username', { rules: validateRules.username, })(<Input />)} </FormItem> <FormItem label="Password"> {form.getFieldDecorator('password', { rules: validateRules.password, })(<Input.Password />)} </FormItem> <FormItem> <Button type="primary" htmlType="submit"> Submit </Button> </FormItem> </Form> ); }; ``` 而在使用React Hook的情况下,可以使用`useState`来存储表单数据和`useEffect`监听变化。具体步骤如下: 1. 定义表单的初始值和验证规则。 ```jsx const initialValues = { username: '', password: '', }; const validateRules = { username: [{ required: true, message: 'Please input your username!' }], password: [{ required: true, message: 'Please input your password!' }], }; ``` 2. 使用`useState`来存储表单数据。 ```jsx const [formValues, setFormValues] = useState(initialValues); ``` 3. 在组件使用表单控件组件,并设置onChange事件来更新表单数据。 ```jsx const MyForm = () => { const handleSubmit = (e) => { e.preventDefault(); console.log('Received values of form: ', formValues); }; return ( <form onSubmit={handleSubmit}> <label> Username: <Input type="text" name="username" value={formValues.username} onChange={(e) => setFormValues({ ...formValues, username: e.target.value }) } /> </label> <br /> <label> Password: <Input.Password name="password" value={formValues.password} onChange={(e) => setFormValues({ ...formValues, password: e.target.value }) } /> </label> <br /> <Button type="primary" htmlType="submit"> Submit </Button> </form> ); }; ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值