Вычислить площадь треугольника с правильными десятичными числами в React

Question

class Q2Root extends React.Component {
   constructor(props) {
       super(props)
       this.state = {
           length : [
               {key:1 ,  a: 0},
               {key:2 ,  b: 0},
               {key:3 ,  c: 0}
           ],

           area: 0
       }
   }

   handleArea = () => {
       const s = (this.state.a + this.state.b + this.state.c) / 2
       const formula = Math.sqrt(s * (s - this.state.a) * (s - this.state.b) * (s - this.state.c))
       this.setState({
           area: formula
       })
   }

   lengthChanged = (event) =>{
       this.setState({
           a: event.target.value,
           b: event.target.value,
           c: event.target.value,
   })
}


   render() {
       return (
           <Aux>
               <p>Introduce the length for a</p>
               <Q2GetArea changed={this.lengthChanged} />
               <p>Introduce the length for b</p>
               <Q2GetArea changed={this.lengthChanged}/>
               <p>Introduce the length for c</p>
               <Q2GetArea changed={this.lengthChanged}/>
               <h3>{this.state.area}</h3>
               <button onClick={this.handleArea}>Get area</button> 
           </Aux>

       )
   }
}

Результат реакции 146871.43055641386

const a = 5;
const b = 6;
const c = 7;

const s = (a+b+c)/2
const formula = Math.sqrt(s*(s-a)*(s-b)*(s-c))


console.log(formula);

Результат jsBin 14.6969

Я пытаюсь получить область треугольника с 3 выбранными значениями. Например, значение a = 5, b = 6, c = 7 дает мне 146871.43055641386. В то время как в jsBin.com результат 14.6969. Не могли бы вы сказать мне, как получить правильные десятичные знаки для React. Спасибо,

Answer 1

Я пересмотрел код после небольшого перерыва, и да, главная проблема заключалась в том, что значения a, b и c действительно были строками, а не целыми числами, отсюда и ошибка в значении области. Справочный артикул: https://flaviocopes.com/how-to-convert-string-to-number-javascript/

Обновлен код ниже:

import React from 'react'

import Area from './Area'
import classes from './App.module.css'

const doArea = (a, b, c) => {
    const s = (a + b + c) / 2; 
    return Math.sqrt(s * ((s - a) * (s - b) * (s - c)));
    //return Math.sqrt(s * ((s - a) * (s - b) * (s - c))).toFixed(2);
}



class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            sides: [
                { text: 'Introduce the length for side a', value: undefined, id: 0 },
                { text: 'Introduce the length for side b', value: undefined, id: 1 },
                { text: 'Introduce the length for side c', value: undefined, id: 2 }
            ],
            area: undefined
        }
    }


    onLengthChange = ({ id, value }) => {
        console.log(value)
        console.log(typeof value)
        const sides = this.state.sides;

        const _sides = sides.map(side => {
            if (side.id === id) {
                return {
                    ...side,
                    value: value,
                }
            } else {
                return side
            }
        });

        this.setState({ sides: _sides })
    }


    onCalculateArea = () => {
        console.log(typeof this.state.area)
        const sides = this.state.sides;


        const sideA = parseInt(sides[0].value) || 1,
            sideB = parseInt(sides[1].value) || 1,
            sideC = parseInt(sides[2].value) || 1;

        this.setState({ area: doArea(sideA, sideB, sideC) });
    }


    render() {
        const props = this.state;

        const inputList = props.sides.map((side, index) => {
            return <Area
                inputText={side.text}
                key={`Input-` + index}
                inputId={side.id}
                onInputChange={
                    (event) =>
                        this.onLengthChange({
                            id: side.id,
                            value: event.target.value
                        })}
            />
        })

        return (

            <div className={classes.background}>
                ...
            </div>
        )
    }
}

export default App;

Answer 2

потому что вы используете неправильный способ установки a, b, c

ваш React result 146871.43055641386 из-за настройки a=7, b=7 , c=7!

вам нужно просто изменить

<Q2GetArea changed={this.lengthChanged} />

на

<p>Introduce the length for a</p>
<Q2GetArea changed={e => self.setState({ a: e.target.value })} />

<p>Introduce the length for b</p>
<Q2GetArea changed={e => self.setState({ b: e.target.value })} />

<p>Introduce the length for c</p>
<Q2GetArea changed={e => self.setState({ c: e.target.value })} />

Я изменил ваш код Q2GetArea = input и переписал ваш класс на:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      a: 5,
      b: 6,
      c: 7,

      area: 0
    };
  }

  handleArea = () => {
    const s = (this.state.a + this.state.b + this.state.c) / 2;
    const formula = Math.sqrt(
      s * (s - this.state.a) * (s - this.state.b) * (s - this.state.c)
    );
    this.setState({
      area: formula
    });
  };

  render() {
    const self = this;
    return (
      <div>
        <p>Introduce the length for a</p>
        <input
          type="number"
          onChange={e => self.setState({ a: e.target.value })}
          value={this.state.a}
        />
        <p>Introduce the length for b</p>
        <input
          type="number"
          onChange={e => self.setState({ b: e.target.value })}
          value={this.state.b}
        />
        <p>Introduce the length for c</p>
        <input
          type="number"
          onChange={e => self.setState({ c: e.target.value })}
          value={this.state.c}
        />
        <h3>{this.state.area}</h3>
        <button onClick={this.handleArea}>Get area</button>
      </div>
    );
  }
}

export default App;

Вывод ответа: HERE