如何显示模态onSubmit表单？

Question

我有一个<Form> （reduxForm）用户提交值时，一旦提交值，它就会转到另一个组件showResults并且该组件返回Modal组件，当前模态组件显示在App组件的顶部，

用户提交（按下提交按钮）值之后，如何使用这些值，然后如何显示模态组件，因此如何显示弹出窗口

Form.jsx

<form onSubmit={handleSubmit}>
  {allQuestions}
  <div>
    <button type="submit" disabled={pristine || submitting}>
      Submit
    </button> // Once your press this button Modal should PopuP
    <button type="button" disabled={pristine || submitting} onClick={reset}>
      Clear Values
    </button>
  </div>
</form>

showResults.jsx

          <Form
                formData={formData}
                onSubmit={e => {
                    this.onSubmit(e);
                }}
            />

Modal.jsx

class ShowModal extends React.Component {
  state = {
    open: false,
  };

  onOpenModal = () => {
    this.setState({ open: true });
  };

  onCloseModal = () => {
    this.setState({ open: false });
  };

  render() {
    const { open } = this.state;
return(
        <Modal open={open} onClose={this.onCloseModal}>
          <h4>Total : {this.props.total} Out of 10</h4>
        </Modal>
      </div>)

Answer 1

将模型打开状态存储在组件外部，并使用属性（正确的方式）或ref（反模式的方式）：

<ShowModal ref={(modal) => this.modal = modal} />

然后：

this.modal.setState(show:true)

但正确的属性方式是：

<ShowModal open={this.sate.showModal} />

可能是因为您正在使用Redux，所以您也希望将模式打开/关闭状态也存储在Redux状态中