Блог

Мой приведенный ниже код может запускать результат, хорошо связывая форму расчета со страницей результатов. Однако я хочу заменить форму при нажатии кнопки «рассчитать диапазон сохранения», отображая результат на той же странице. Это выглядит как на картинке ниже

]1

Мой код здесь: https://codesandbox.io/s/calculation-form-uxip8?file=/src/components/Calculator.jsx

Calculator.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;

  

Есть ли у кого-нибудь идея заменить форму информацией о результате на той же странице? Спасибо за вашу помощь!

Вы можете удалить модальный и добавить оператор условия для переключения между содержимым формы и вашим результатом.

Вот как должен выглядеть ваш метод возврата

 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>
); 
  

Вот документация react по условному отображению jsx

https://reactjs.org/docs/conditional-rendering.html

Вы собираетесь использовать оператор условия

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

  

Я вижу, вы используете isOpen для отображения модального результата. Давайте немного изменим вашу функцию рендеринга на что-то вроде этого

 render() {
    return (!isOpen ? <YourForm /> : <Result />)
}
  

В этом случае вы должны изменить isOpen на что-то вроде isSubmitted