Я пытаюсь сделать калькулятор React. В основном это делается, но у меня есть одна проблема, которую я не знаю, как исправить: я не могу ограничить количество операторов, которые может ввести пользователь (например, я хочу ограничить "++++" до просто "+", а также предотвращает объединение двух операторов: + - должно стать -). Я пробовал сбрасывать состояние каждый раз, когда пользователь вводит оператор, но без кубиков. Я серьезно заблудился здесь. Я думал о Regex, но это кажется довольно проблематичным (слишком много контекстов, чтобы попробовать).

class Calculator extends Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(evt) {
    const id = evt.target.id;
    const result = evt.target.value;

    this.setState(prevState => ({
      value: `${prevState.value}${result}`.replace(/^0+\B/, '')
    }));

    if (id === 'equals') {
      this.setState({ value: math.eval(this.state.value) });
    } else if (id === 'clear') {
      this.setState({ value: 0 });
    }
  }
}
4
Hernan Ariel 23 Окт 2018 в 03:49

2 ответа

Лучший ответ

Вы можете использовать регулярные выражения, чтобы решить эту проблему. Основная проблема с использованием подхода, основанного на includes(), заключается в том, что он не обеспечивает правильный формат во входной строке. Может быть, вы могли бы использовать такое регулярное выражение?

/^\d*([/\+-/*=]\d+)*$/gi

Это предотвратит такие проблемы, как несколько операндов, например +++ и т. Д.

class Calculator extends React.Component {

  constructor(props) {


 super(props);
    this.state = { value: "" };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(evt) {

    const result = evt.target.value;

    // Update state
    this.setState({
      value: result
    });

    // Comine previous state with input value
    //const combination = `${ this.state.value }${result}`;
    console.log(result, 'combination', result)
        // Use regular expression to check valid input. If invalid
    // prevent further processing
    if(!result.match(/^\d*([/\+-/*=]\d+)*$/gi)) {
      console.error('Invalid input')
      return
    }

        this.setState({ calculated: eval(result) });

  }

  render() {
  return <h1>
  <input value={this.state.value} onChange={(e) => this.handleClick(e)}/>
  <p>{ this.state.calculated }</p>
  </h1>
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

Здесь есть работающий JSFiddle, который вы можете попробовать

0
Dacre Denny 23 Окт 2018 в 02:24

Вы можете сохранить список с операциями и текущим набранным символом. Затем перед вставкой проверьте, является ли это операцией для предотвращения добавления нескольких из них

< Сильный > Пример

const ops = ['/', '+', '-', '^']
this.setState({lastChar: result})

// Before setState with the full formula
if(this.state.lastChar === result && ops.includes(result)) else if (ops.includes(this.state.lastChat) && ops.includes(result)) return;

предполагается, что result - это только набранный / нажатый символ

< STRONG> проблемы

Эта стратегия определенно не идеальна. Например, набрать 1 + -2 или 1 * -3 не получится. Но с этого момента вы можете настроить его под свои нужды.

Я разговариваю по телефону, извините за плохое форматирование

0
Y. Gherbi 28 Окт 2018 в 23:58
52939595