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

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

1 个答案: