Question

我正在尝试在项目中使用redux-form。这是我的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",
 }

我想在一个语义UI-react模态中有一个表单，并且在表单中将具有redux-form的Field组件。下面是我的代码

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

有人针对这种类型的错误有解决方案吗？谢谢。

将redux-form与语义UI-react提供的Modal一起使用

0 个答案: