React Hook antd Form回显表单,form.resetFields()清除无效问题

1 篇文章 0 订阅
1 篇文章 0 订阅

可能的原因:

1. 表单值没有绑定到 form 组件上;

2. 使用了表单域的 initialValue 属性,此属性值不会被 resetFields 清空;

3. resetFields 调用的时机不正确:表单值还没有被重新赋值就调用 resetFields。

一、利用useEffect监听编辑回显的数据

  const [editData, setEditData] = useState({}) // 编辑回显数据

  // 清除表单缓存,editData在变化时立即清空Form表单,比如点击编辑按钮时存储编辑回显数据时,就会执行
  useEffect(() => {
    setTimeout(() => {
      form.resetFields()
    })
  }, [editData])


  • 5
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
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> ); }; ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值