如何在提交表单上显示模态？

Question

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

一旦用户提交（按下提交按钮）值，然后使用这些值，我怎样才能获得Modal组件Popup相应地显示模态

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状态