Question

我编写了代码，它使用“模态”对话框来显示表单。我的反应应用程序呈现在“root”

的index.html

<div id="root"></div>

App.js

const store = configureStore();

    ReactDOM.render(
      <Provider store={store}>
            <ExampleBasic/>
      </Provider>
      , document.getElementById('root'));

ExmpleBasic.js

请在此处忽略组件中的状态管理。这只是例如。

import React, { PureComponent } from 'react';
import Lorem from 'react-lorem-component';
import Modal from '@atlaskit/modal-dialog';
import Button from '@atlaskit/button';

export default class ExampleBasic extends PureComponent {
  state = { isOpen: false }
  open = () => this.setState({ isOpen: true })
  close = () => this.setState({ isOpen: false })
  secondaryAction = ({ target }) => console.log(target.innerText)

  render() {
    const { isOpen } = this.state;
    const actions = [
      { text: 'Close', onClick: this.close },
      { text: 'Secondary Action', onClick: this.secondaryAction },
    ];

    return (
      <div>
        <Button onClick={this.open}>Open Modal</Button>

        {isOpen && (
          <Modal
            actions={actions}
            onClose={this.close}
            heading="Modal Title"
          >
            <BasicFormContainer />
          </Modal>
        )}
      </div>
    );
  }
}

BasicFormContainer.js

const mapStateToProps = state => ({
  addDesignation: state.designations.addDesignation,
});

const mapDispatchToProps = dispatch => ({
});

export default connect(mapStateToProps, mapDispatchToProps)(BasicForm);

BasicForm.js

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';

class BasicForm extends Component {
  constructor(props) {
    super(props);
    this.submit = this.submit.bind(this);
  }

  submit(values) {
    console.log(values);
  }

  render() {
    const { handleSubmit } = this.props;

    return (

      <form onSubmit={handleSubmit(this.submit)}>
        <Field
          name="designationName"
          component="input"
          placeholder="Name"
          label="Enter name"
          autoFocus
        />
      </form>

    );
  }
}


export default reduxForm({
  form: 'BasicForm',
  enableReinitialize: true,
})(BasicForm);

然而，使用门户网站，在当前DOM之外呈现模态。

由于modal的渲染超出了redux上下文的范围，因此它没有得到商店。我收到错误“未捕获错误：字段必须在使用reduxForm（）装饰的组件内”

下面是相同类型问题的链接，其中门户网站中的redux表单不起作用。 Redux Form Wrapped Inside Custom Portal Component?

Answer 1

在React 16中它由门户网站处理，但之前的版本你可以尝试类似下面的内容。

export default class ExampleBasic extends PureComponent {
  ...

  static contextTypes = { store: React.PropTypes.object };
  render() {
    const { isOpen } = this.state;
    const actions = [
      { text: 'Close', onClick: this.close },
      { text: 'Secondary Action', onClick: this.secondaryAction },
    ];

    return (
      <div>
        <Button onClick={this.open}>Open Modal</Button>

        {isOpen && (
          <Modal
            actions={actions}
            onClose={this.close}
            heading="Modal Title"
          >
            <Provider store={this.context.store}>
               <BasicFormContainer />
            </Provider>
          </Modal>
        )}
      </div>
    );
    }
  }

Answer 2

您需要将 BasicForm.js 的值传递给Redux存储，并从那里调度操作，而不是从 BasicFormContainer.js 调度。这样，模态仍然在root元素的范围内，因此无需访问Provider之外的商店。

然后根据表单中输入的值更新Redux商店。一旦商店更新，您就可以从应用中的任何位置访问它，例如模态。

Answer 3

我有同样的问题。回到2.1.0版本。它对我有用。

Redux：如何将商店传递到在提供者范围之外创建的表单

3 个答案: