Как калькулятор, который написан на JQuery, засунуть в качестве компонента React?

Question

[way_t]

Создал калькулятор на JQuery: jsfiddle.net/y0modxw9
Создал отдельный класс, где зарендерил через React HTML-структуру (позже экспортировал его и импортировал в большой jsx, как обычно).
В файле index.html (используется для того, чтобы подключить уже собранный Webpack'ом bundle) прописал отдельно путь к своему скрипту калькулятора + CDN JQuery. Обычный console.log работает, то есть путь к скрипту и сам JQuery работают. Но вот сам скрипт когда вставляю -- не выходит. При том, что скрипт работает и на онлайн-сайтах (JSFiddle тот же), и когда локально всё это дело без React и Webpack использую.

Comments

[Антон Хмыров]

а зачем тут jQuery? не лучше ли написать сразу на реакте?

[way_t]

Антон Хмыров: ну мне лично пока тяжело написать на React'e такой калькулятор. А необходимость в его работе внутри React-приложения необходима.

[Олег Драпеза]

way_t: на самом деле, попробуйте на react, это окажется проще, чем вы думаете)
Вместо поиска элементов, изменения и отслеживания их изменений через jquery, вы в react компоненте создаете начальные состояния и функции изменения этих состояний (например посчитать скидку), и привязываете эти свойства и функции к html разметке (точнее jsx). Обновляет html react самостоятельно, вот пример отдельных частей такого компонента:

Свойства компонента:
this.state.price = 0;
this.state.offer = 0;
this.state.result = 0;
this.caclResult = function() { this.setState({result: this.state.price - this.state.offer}; }

JSX разметка:
Итого: {this.state.result}

[way_t]

Олег Драпеза: спасибо большое за ответ. Но, честно говоря, не совсем понимаю. Где мне записать, например, вот этот this.state.result? В value input'a? И вот там в коде есть четыре инпута, + 3 вывода общей суммы (для первой строки, для второй и итоговая сумма первых двух). Необходима дополнительно интерактивная реализация + условие, что при значениях двух инпутов > 100 -- сброс до 100 + запрет на ввод букв. То есть такие ограничения я уже сделал посредством JQ, но React'ом как-то вообще не фонтан получается. Может Вы могли бы помочь разобраться с этим? Хотя бы на примере двух инпутов и итоговой суммы. Спасибо.

[way_t]

Олег Драпеза: + ещё один момент: я пишу на ES6 React (требования от офиса).

Answer 1

[Олег Драпеза]

Если честно, не уверен что вы целенаправленно изучали реакт.
Рекомендую потратить немного времени на этот курс: https://maxfarseer.gitbooks.io/react-course-ru/content/

Небольшой пример на ES5:
Для ограничения ввода, к примеру, возьмем готовый плагин react-numeric-input

var NumericInput = require('react-numeric-input');

var Calculator = React.createClass({
  getInitialState: function() {
    return {
      price: 0,
      offer: 0,
      result: 0
    };
  },
  caclResult: function() {
    this.setState({result: this.state.price - this.state.offer});
  },
  render: function() {
    return (
      <div className='calculator'>
        <NumericInput min={0} max={100} value={this.state.price} onChange={this.caclResult} />
        <NumericInput min={0} max={100} value={this.state.offer} onChange={this.caclResult} />
        <span>Итого: {this.state.result}</span>
      </div>
    )
  }
});

Comments

[way_t]

Спасибо большое. Курс смотрел, но на ES6 большинство вещей делается по-другому. Пришлось смотреть оф.документацию Facebook, а там не сказал бы, что прям все подробно разжевывают. Больше на уровне примитива.

Спасибо за пример, буду пробовать)

[Олег Драпеза]

way_t: вот подробная статья, одинаковые примеры на реакте, используя es5 и es6 - cheng.logdown.com/posts/2015/09/29/converting-es5-...

И почитайте про es6 классы, это просто синтаксический сахар - https://learn.javascript.ru/es-class

[way_t]

Олег Драпеза: кстати говоря. Попробовал ваш код -- не работает...

[Олег Драпеза]

way_t: https://jsfiddle.net/gL8fr09m/ код во втором теге скрипт - исходники плагина react-numeric-input