Муравей Дизайн - Использование в функциональной составляющей - PullRequest
Новая
       13

Муравей Дизайн - Использование в функциональной составляющей

0 голосов
/ 28 марта 2020

Я использую:

  • Ant Design (antd) версия 4.0.4
  • Реакция 16.13.1

и я создал Ant Design

Чего я хочу добиться:

Теперь я хочу использовать свой Form.Item в функциональном компоненте.

Я увидел, что useRef / useCallback может помочь достичь этого без создания классического компонента класса.

Мой текущий подход выглядит так: 

import React, { useState, useCallback } from 'react';
import {
  Checkbox,
  Form,
  Select,
  message,
} from 'antd';

const { Option } = Select;


const newMultiSelectInput = ({
  id,
  label,
  msgs,
  data,
  selectMode,
  flags,
  form,
}) => {
  const [formRef, setFormRef] = useState(null);

  const saveFormRef = useCallback((node) => {
    if (node !== null) {
      setFormRef(node);
    }
  }, []);

  const handleSelect = (value, { pForm, inputID, availableOptions }) => {
    console.log(`${pForm} ${inputID}`);
    console.log(availableOptions);
    formRef.validateFields();
  };

  const isRequiredField = Object.prototype.hasOwnProperty.call(flags, 'required') ? flags.required : true;
  const [selectionMode, setSelectionMode] = useState(selectMode && selectMode.length ? selectMode : 'multiple');
  return (
    <Form.Item
      label={label}
      hasFeedback
      id={id}
      name={id}
      rules={[{ type: 'array', required: isRequiredField, message: msgs.validation }]}
    >
      <Select ref={saveFormRef} allowClear onSelect={(e) => { handleSelect(e, { form, id, availableOptions: data }); }} notFoundContent={null} mode={selectionMode} placeholder={msgs.placeholder}>
        {data
          ? data.map((el) => (
            <Option value={el} key={el}>
              <span>{el}</span>
            </Option>
          ))
          : null}
      </Select>
    </Form.Item>

  );
};
export default newMultiSelectInput;

Звонок выглядит так: 

newMultiSelectInput({
  flags: {
    required: true,
  },
  id: 'test',
  label: 'test',
  msgs: {
    validation: 'Error - Please fill out values !',
    placeholder: 'Please fill out the testbox.',
  },
  data: ['A', 'B', 'C'],
  form,
})

Форма создается с помощью этого: 

const [form] = Form.useForm();

Может кто-нибудь помочь?

...