Reactjs 如何通过在React中的同一页面上显示结果来替换表单

我下面的代码可以运行结果，很好地将计算表单链接到结果页面。但是，我希望在单击按钮“计算保存范围”时，通过在同一页面上显示结果来替换表单。它看起来像下面的图片

]

我的代码在这里：

计算器.jsx

import React, { Component } from "react";
import "./style.css";
import { Button, Form, Row, Col, Modal } from "react-bootstrap";

class Calculator extends Component {
  constructor(props) {
    super(props);
    this.state = {
      
      squareFootage: ""
      
    };
  }

  

  handleSquare = (event) => {
    this.setState({ squareFootage: event.target.value });
  };

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

  closeModal = () => this.setState({ isOpen: false });

  render() {
    return (
      <div className="calculator">
        <h1> CALCULATION FORM </h1>
        <Form className="form-horizontal">
       
            
         

          <Form.Group as={Row} controlId="formHorizontalFootage">
            <Form.Label column sm={6}>
              Square footage of buildings*
            </Form.Label>
            <Col sm={6}>
              <Form.Control
                type="squareFootage"
                placeholder="sq ft"
                value={this.state.squareFootage}
                onChange={this.handleSquare}
                required
              />
              <div style={{ fontSize: 14, color: "red" }}>
                {this.state.squareFootageError}
              </div>
              <Form.Text className="text-muted">
                Please input a number, e.g. 12300
              </Form.Text>
            </Col>
          </Form.Group>

         

          <Button onClick={this.handleSubmit}>
            Calculate your Savings Range
          </Button>

          <Form.Text className="text-muted">* Required Field</Form.Text>
        </Form>
        <Modal
          style={{
            position: "absolute",
            float: "left",
            left: "50%",
            top: "50%",
            transform: "translate(-50%, -50%)"
          }}
          show={this.state.isOpen}
          value={this.state.value}
          onHide={this.closeModal}
        >
          <Modal.Header closeButton>
            <Modal.Title>RESULT</Modal.Title>
          </Modal.Header>
          <h2>You could save between</h2>
          <h1>{this.state.value} Annually</h1>
          <Modal.Footer>
            <Button variant="primary" onClick={this.closeModal}>
              Close
            </Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
}

export default Calculator;

import React，{Component}来自“React”；
导入“/style.css”；
从“react bootstrap”导入{按钮、窗体、行、列、模式}；
类计算器扩展组件{
建造师（道具）{
超级（道具）；
此.state={
平方英尺：“
};
}
handleSquare=（事件）=>{
this.setState（{squarecentes:event.target.value}）；
};
handleSubmit=（事件）=>{
event.preventDefault（）；
这是我的国家({
是的，
价值：
"$" +
数学地板（1.69*this.state.squareceets*（10/100））+
"- $" +
数学地板（1.69*this.state.squareceets*（30/100））
});
};
closeModal=（）=>this.setState（{isOpen:false}）；
render（）{
返回(
计算表
建筑面积*
{this.state.squareFootageError}
请输入一个数字，例如12300
计算你的储蓄范围
*必填字段
结果
你可以节省
{this.state.value}
接近
);
}
}
导出默认计算器；

---

是否有人有想法在同一页上用结果信息替换表单？谢谢你的帮助

我看到您正在使用isOpen显示结果。 让我们将渲染函数稍微更改为如下内容

render（）{
返回（！isOpen？：）
}

---

在本例中，您应该将isOpen更改为类似isSubmitted的内容

我看到您正在使用isOpen显示结果模式。 让我们将渲染函数稍微更改为如下内容

render（）{
返回（！isOpen？：）
}

---

您应该将isOpen更改为类似isSubmitted的内容。在本例中，您可以删除模式并添加条件运算符，以便在表单内容和结果之间切换

下面是您的返回方法应该是什么样子

return (
  <div className="calculator">
    <h1> CALCULATION FORM </h1>
    {
      /*Condition*/ !this.state.isOpen ? (
        /** if true return form */
        <Form className="form-horizontal">
          <Form.Group as={Row} controlId="formHorizontalFootage">
            <Form.Label column sm={6}>
              Square footage of buildings*
            </Form.Label>
            <Col sm={6}>
              <Form.Control
                type="squareFootage"
                placeholder="sq ft"
                value={this.state.squareFootage}
                onChange={this.handleSquare}
                required
              />
              <div style={{ fontSize: 14, color: "red" }}>{this.state.squareFootageError}</div>
              <Form.Text className="text-muted">Please input a number, e.g. 12300</Form.Text>
            </Col>
          </Form.Group>
          <Button onClick={this.handleSubmit}>Calculate your Savings Range</Button>

          <Form.Text className="text-muted">* Required Field</Form.Text>
        </Form>
      ) : (
        /** else return your result div */
        <div>
          <h2>You could save between</h2>
          <h1>{this.state.value} Annually</h1>
        </div>
      )
    }
  </div>
); 

返回(
计算表
{
/*条件*/！this.state.isOpen(
/**如果为真，请填写申报表*/
建筑面积*
{this.state.squareFootageError}
请输入一个数字，例如12300
计算你的储蓄范围
*必填字段
) : (
/**否则返回结果div*/
你可以节省
{this.state.value}
)
}
); 

下面是关于jsx条件呈现的react文档

你要使用条件操作符吗

<MyComponent>
 {conditionCount > 0 
  ? <IfComponent/>
   : <ElseComponent/>}// make sure to wrap with the bracket {}
</MyComponent>

{conditionCount>0
? 
：}//确保用括号{}换行

您可以删除模式并添加条件运算符，以便在表单内容和结果之间切换

下面是您的返回方法应该是什么样子

return (
  <div className="calculator">
    <h1> CALCULATION FORM </h1>
    {
      /*Condition*/ !this.state.isOpen ? (
        /** if true return form */
        <Form className="form-horizontal">
          <Form.Group as={Row} controlId="formHorizontalFootage">
            <Form.Label column sm={6}>
              Square footage of buildings*
            </Form.Label>
            <Col sm={6}>
              <Form.Control
                type="squareFootage"
                placeholder="sq ft"
                value={this.state.squareFootage}
                onChange={this.handleSquare}
                required
              />
              <div style={{ fontSize: 14, color: "red" }}>{this.state.squareFootageError}</div>
              <Form.Text className="text-muted">Please input a number, e.g. 12300</Form.Text>
            </Col>
          </Form.Group>
          <Button onClick={this.handleSubmit}>Calculate your Savings Range</Button>

          <Form.Text className="text-muted">* Required Field</Form.Text>
        </Form>
      ) : (
        /** else return your result div */
        <div>
          <h2>You could save between</h2>
          <h1>{this.state.value} Annually</h1>
        </div>
      )
    }
  </div>
); 

返回(
计算表
{
/*条件*/！this.state.isOpen(
/**如果为真，请填写申报表*/
建筑面积*
{this.state.squareFootageError}
请输入一个数字，例如12300
计算你的储蓄范围
*必填字段
) : (
/**否则返回结果div*/
你可以节省
{this.state.value}
)
}
); 

下面是关于jsx条件呈现的react文档

你要使用条件操作符吗

<MyComponent>
 {conditionCount > 0 
  ? <IfComponent/>
   : <ElseComponent/>}// make sure to wrap with the bracket {}
</MyComponent>

{conditionCount>0
? 
：}//确保用括号{}换行

这只是一个条件视图，比如

{condition？true:false}

我可以把它放在哪里？你能解释清楚吗？这只是一个条件视图，比如

{condition？true:false}

我可以把它放在哪里？你能解释清楚吗？你能试试这里吗？有一个错误，看起来您没有放置条件文字。这里是固定的内部，我想有一个链接回到，我可以再次使用计算器，在App.js中的哪里？你不能使用路由链接导航回来，因为这个条件渲染发生在同一路由相同的组件下。但是，您可以制作一个按钮，将this.state.isOpen切换为false，以隐藏结果并再次显示计算器。您可以在代码沙盒中尝试，以便我易于理解吗？您可以在此处尝试吗？有一个错误，看起来您没有放置条件文字。这里是固定的内部，我想有一个链接回到，我可以再次使用计算器，在App.js中的哪里？你不能使用路由链接导航回来，因为这个条件渲染发生在同一路由相同的组件下。但是，您可以制作一个按钮，将this.state.isOpen切换为false，以隐藏结果并再次显示计算器。您可以尝试在代码沙盒中进行操作，以便我能够轻松地进行操作吗？