Обновите форму antd, если initialValue изменено - PullRequest
0 голосов
/ 25 апреля 2020

Я передаю данные currentUser из моей Redux-саги в форму antd. Имя, адрес электронной почты, номер телефона, введение передаются в форму в качестве начального значения, и я хочу отправить форму в виде запроса пут в дБ, если начальное значение было изменено .. вот мой код

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);

я нашел "onValuesChange" в antd api, но не знаю, как его использовать.

1 Ответ

0 голосов
/ 25 апреля 2020

Метод жизненного цикла componentdidupdate можно использовать для сравнения предыдущих и текущих значений параметров, чтобы проверить, изменилось ли начальное значение. Если изменилось, сделайте вызов API для сохранения в БД. Надеюсь, это поможет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...