Добавление удаляет другие от ценностей

Question

Я пытался добавить динамический c список компонентов формы в свой from, но как только я это сделал, значения не содержали других элементов формы. Ниже приведен мой компонент реакции. Значения, полученные в функции handleSubmit, не содержат значений, введенных в заголовке, описании и т. Д. c. только те, что внутри элемента.

import React from "react";
import {Button, Form, Input, Select} from 'antd';
import '@ant-design/compatible/assets/index.css';
import TextArea from "antd/es/input/TextArea";
import PlusOutlined from "@ant-design/icons/lib/icons/PlusOutlined";
import MinusCircleOutlined from "@ant-design/icons/lib/icons/MinusCircleOutlined";

export default class MaterialForm extends React.Component {

  static defaultProps = {
    material: {},
    onSubmit: (material) => {
      console.log('Form submitted with data: ', material)
    }
  };

  constructor(props) {
    super(props);
    this.state = {
      //Behavior Variables
      addPricingClicked: false,
      pricingElements:[],
    }
  }


  render() {

    return (
        <Form layout="vertical"
              onFinish={values => {handleSubmit(this,values)}}>
          <Form.Item style={{display: "none"}}>
                <Input type="text" placeholder="Id"/>,
          </Form.Item>
          <Form.Item label="Title"
                     rules={[{required: true, message: 'Please input title of the material!'}]}
          >
                <Input type="text" placeholder="Material title"/>,
          </Form.Item>
          <Form.Item label="Description"
                     rules={[{required: true, message: 'Please describe the material!'}]}
          >
                <TextArea type="text" placeholder="Description of the material" rows={5}/>,
          </Form.Item>
          <Form.Item label="Care Instructions"
                     rules={[{required: true, message: 'Please input care instructions!'}]}>
                <TextArea type="text" placeholder="Care instructions for the material" rows={5}/>,
          </Form.Item>
          <Form.List name="materialPricing">
            {(fields, { add, remove }) => {
              return (
                <div>
                  <Form.Item label="Title"
                             rules={[{required: true, message: 'Please input title of the material!'}]}
                  >
                    <Input type="text" placeholder="Material title"/>,
                  </Form.Item>
                  {fields.map((field, index) => (
                    <Form.Item
                      label={index === 0 ? 'vendor' : ''}
                      required={false}
                      key={field.key}
                    >
                      <Form.Item
                        {...field}
                        validateTrigger={['onChange', 'onBlur']}
                        rules={[
                          {
                            required: false,
                            whitespace: true,
                            message: "Please add Material Pricing.",
                          },
                        ]}
                        noStyle
                      >
                        <Input placeholder="Material Rate" style={{ width: '45%',marginLeft:'25px' }} />
                      </Form.Item>
                      {fields.length > 1 ? (
                        <MinusCircleOutlined
                          className="dynamic-delete-button"
                          style={{ margin: '0 8px' }}
                          onClick={() => {
                            remove(field.name);
                          }}
                        />
                      ) : null}
                    </Form.Item>
                  ))}
                  <Form.Item>
                    <Button
                      type="dashed"
                      onClick={() => {
                        add();
                      }}
                      style={{ width: '60%' }}
                    >
                      <PlusOutlined /> Add field
                    </Button>
                  </Form.Item>
                </div>
              );
            }}
          </Form.List>
          <Form.Item>
            <Button type="primary" htmlType="submit"
            >
              Submit
            </Button>
          </Form.Item>
        </Form>
    )
  }

}

const handleSubmit = (self, values) => {
  console.log(self.state);
  console.log('Received values of form: ', values);
  // this.props.onSubmit(values);
};