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

问题描述

我正在将我的 Redux-saga 中的 currentUser 数据传递到 antd 表单中，姓名、电子邮件、电话号码、介绍作为初始值传递给表单，我想要做的是将表单作为 put 请求提交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屋！