如何在 React 中提交表单并弹出模态以显示结果

Question

我这里建了一个计算表作为linkhttps://codesandbox.io/s/calculation-form-uxip8?file=/src/components/Result.jsx

相反，在另一个页面上显示结果，我希望当用户单击“计算保存范围”按钮时，有一个弹出模式在同一页面上显示结果

我打算写Model.jsx

import React from "react";
import { NavLink } from "react-router-dom";

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

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

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

  render() {
    const { open } = this.state;
return(
       <div className="result">     
        <Modal open={open} onClose={this.onCloseModal}>
           <h2>You could save between</h2>
           <h1>{this.props.location.state.value} Annually</h1>
           <NavLink to="/">Use Calculator Again</NavLink>
        </Modal>
      </div>)

有人可以过来给我一些建议吗？还有，如果我想写 model.jsx，如何将它 link 写入“计算保存范围”按钮？ link另一个页面也是这样吗？谢谢！

Answer 1

将 ShowModal 组件放在计算器组件上，然后不要在计算按钮上使用 NavLink，而是使用它来更改模态框的状态以打开。所以在你的 handleSubmit

handleSubmit = (event) => {
  event.preventDefault();
  const isValid = this.validate();
  if (isValid) {
    this.setState({ open: true, value: "$" +
      Math.floor(1.69 * this.state.squareFootage * (10 / 100)) +
      "- $" +
      Math.floor(1.69 * this.state.squareFootage * (30 / 100)) });
 }

};

确保为状态添加值，然后将该值作为道具传递给 ShowModal 组件。

<ShowModal open={this.state.open} value={this.state.value} onClose={this.onClose} />

你的模态组件应该看起来像这样，接受 3 个道具（如果你有任何东西要传递的话，可以接受更多）

如何在 React 中提交表单并弹出模态以显示结果

How to submit a form and pop up a modal to display the result in React

reactjs

forms

button

components

simplemodal