如果initialValue更改，则更新antd表单 [英] Update antd form if initialValue is changed

问题描述

我正在将Redux传奇中的currentUser数据传递到antd表单中，姓名，电子邮件，电话号码，介绍作为初始值传递到表单，我要做的是我想将表单作为放置请求提交如果初始值已更改，则为db.这是我的代码

I'm passing currentUser data from my Redux-saga into antd form, Name, email, phone number, introduction are passed to the form as initialvalue, what i want to do is i want to submit the form as a put request to db if the initialvalue has been changed.. here is my code

import React  from 'react';
import {createStructuredSelector} from 'reselect';
import { connect } from 'react-redux';
import { selectCurrentUser } from '../../redux/user/user.selector';



import { Form, Input, Button } from 'antd';

import './profile_form.styles.css'

/* eslint-disable no-template-curly-in-string */
const ProfileForm = ({currentUser}) => {
  const {name, email} = currentUser


  const onFinish = values => {
    console.log(values);
  };

  const layout = {
    labelCol: {
      span: 7,
    },
    wrapperCol: {
      span: 15,
    },
  };


  return (
    <Form className='profile-form' {...layout} 
    onFinish={onFinish}  
    initialValues={{ firstname: name, lastname: name, email: email }} 
    >
      <Form.Item
        name='firstname'
        label="First Name"
      >
        <Input  />
      </Form.Item> 
       <Form.Item
        name= 'lastname'
        label="Last Name"
      >
        <Input  value={name}/>
      </Form.Item>
      <Form.Item
        name='email'
        label="Email"

      >
        <Input value={email} />
      </Form.Item>
      <Form.Item name= 'phonenumber' label="Phone Number"
      >
        <Input />
      </Form.Item>
      <Form.Item name='introduction' label="Introduction"
      >
        <Input.TextArea />
      </Form.Item>
      <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

const mapStateToProps = createStructuredSelector({
  currentUser:selectCurrentUser
})  

export default connect(mapStateToProps) (ProfileForm);

我在antd api中发现了"onValuesChange"，但不知道如何使用.

i found "onValuesChange" in antd api but have no idea how it's to be used.

推荐答案

如果使用的是钩子，则可以使用以下代码添加useEffect:

If you are using hooks you can add an useEffect with the code:

useEffect(() => {
 form.setFieldsValue(defaultValues)
}, [form, defaultValues])

请记住先定义表单值:

const [form] = Form.useForm()

并记住将此表单实例传递给Form组件:

And remember to pass this form instance to the Form component:

<Form
    form={form}
    layout="vertical"
    name="form-name"
    initialValues={defaultValues}
    onFinish={submitHandler}
  >

以这种形式，您将在组件渲染时更新defaultValues.如果使用的是类，则可以将代码放入componentDidUpdate生命周期方法中.

In this form, you going to update the defaultValues when the component renders. If you are using classes, you can put the code inside componentDidUpdate lifecycle method.

致谢

这篇关于如果initialValue更改，则更新antd表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！