Я пытаюсь использовать избыточную форму в моем проекте.Вот некоторая информация из моего 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()
Есть ли у кого-нибудь решение (ы) для этого типа ошибки?Спасибо.