Использование приставки-формы с модалом, предоставляемым semantic-ui-реагировать - PullRequest
0 голосов
/ 03 июня 2019

Я пытаюсь использовать избыточную форму в моем проекте.Вот некоторая информация из моего package.json

{
    "react-redux": "^6.0.0",
    "redux": "^4.0.1",
    "redux-form": "^8.2.3",
    "semantic-ui-css": "^2.2.14",
    "semantic-ui-react": "^0.80.2",
 }

Я хочу иметь форму внутри Modal semantic-ui-реагировать, а внутри формы будет иметь компонент Field из redux-form.Ниже мой код

import React from 'react';
import { Modal, Button, Menu, Form } from 'semantic-ui-react';
import { Field, reduxForm } from 'redux-form';
import PropTypes from 'prop-types';

const InsertAdModal = ({ handleSubmit, open, onClose }) => {
  return (
    <Modal
      as="form"
      onSubmit={handleSubmit}
      size="mini"
      open={open}
      closeOnDimmerClick={false}
      onClose={onClose}>
      <Modal.Header>
        <Menu secondary>
          <Menu.Item>
            <h4>INSERT NEW AD</h4>
          </Menu.Item>
          <Menu.Menu position="right">
            <Button icon="close" color="grey" size="large" onClick={onClose} />
          </Menu.Menu>
        </Menu>
      </Modal.Header>
      <Modal.Content>
        <Form>
          <label htmlFor="adId">Ad ID</label>
          <Field name="adID" type="text" placeholder="Insert Ad ID" component={Form.Field} />
        </Form>
      </Modal.Content>
      <Modal.Actions>
        <Button primary>SUBMIT</Button>
      </Modal.Actions>
    </Modal>
  );
};
InsertAdModal.propTypes = {
  open: PropTypes.bool,
  onClose: PropTypes.func,
  close: PropTypes.func,
  saveFilterAction: PropTypes.func,
  loadFilterAction: PropTypes.func,
  handleSubmit: PropTypes.func,
  postedAt: PropTypes.object,
  viewsByTime: PropTypes.object,
  stats: PropTypes.object,
};

export default reduxForm({
  form: 'insertForm',
})(InsertAdModal);

Но когда я нажимаю на кнопку, чтобы открыть модал, модал открылся, но форма не появилась, на вкладке консоли было сказано:

Uncaught Error: Field must be inside a component decorated with reduxForm()

Есть ли у кого-нибудь решение (ы) для этого типа ошибки?Спасибо.

...