0

Изучаю react и решил сделать простое приложение-калькулятор из двух инпутов для ввода числовых данных и селекта, который позволяет выбрать нужную операцию. За вывод отвечает див. Так как в итоге при попытке это все совместить мы имеет string и получаем строку по типу "2 + 4" а не результат, то думал сделать .eval() и перевести в число принудительно, но React ругается на функции js. Как можно использовать eval в React или более красиво это сделать.

    import React, {Component} from 'react'


class Calc extends Component {

    constructor (props){

        super(props);

        this.state = {
            firstOperand: 0,
            secondOperand: 0,
            operation: '',
            result: 0
        }

        this.secondOperand = this.secondOperand.bind(this);
        this.firstOperand = this.firstOperand.bind(this);
        this.operation  = this.operation.bind(this);
        this.result = this.result.bind(this);


    }

    firstOperand(event) {
        this.setState({firstOperand: event.target.value})
        this.result()
    }

    secondOperand(event) {
        this.setState({secondOperand: event.target.value})
        this.result()
    }

    operation(event){
        this.setState({operation: event.target.value})
        this.result()
    }

    result(){

    }




    render(){
        return(
            <div>
            <form >

                <input
                type = "number"
                value = {this.state.firstOperand}
                onChange = {this.firstOperand}
                />

                <select value={this.state.value} onChange={this.operation}>
                    <option value="+">+</option>
                    <option value="-">-</option>
                    <option value="*">*</option>
                    <option value="/">/</option>
                </select>


                <input
                type = "number"
                value = {this.state.secondOperand}
                onChange = {this.secondOperand}
                />
            </form>


            <div>
               <p>{this.state.result}</p>
            </div>
            </div>
        )
    }
}

export default Calc
2
  • Многие напишут "Нужен код". К сожалению, сейчас возможности его предоставить нету. Нужен просто совет возможно с примером, как добавить в react eval() или как сделать из трех строковых выражений одно математическое. То есть из '2' + '-' + '2' сделать не '2 - 2', а 0 3 июн 2019 в 11:39
  • Я - представитель многих. Нужен код. 3 июн 2019 в 12:29

2 ответа 2

1

Правило no-eval включено в eslint-e по умолчанию. Для того чтоб отключить его в коде, достаточно поставить  // eslint-disable-next-line no-eval перед строчкой с eval'om:

// eslint-disable-next-line no-eval
const result = eval(expression);

Желательно понимать что eval() отключён по умолчанию не случайно. Он считается опасной функцией и в большинстве случаев можно обойтись без него. Например, в вашем случае, можно воспользоваться вот этой библиотекой: https://github.com/silentmatt/expr-eval

0

eval использовать в принципе не стоит.

Как вариант, функцию result можно реализовать следующим образом.

result() {
  let res;
  switch(this.state.operator) {
    case '+':
      res = this.state.firstOperand + this.state.secondOperand;
    case '-':
      res = this.state.firstOperand - this.state.secondOperand;
    ...
    // остальной код
  }
  this.setState({result: res});
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.