Должен ли я использовать прослушиватель событий или это должно быть в методе жизненного цикла в React? - PullRequest
Новая
       20

Должен ли я использовать прослушиватель событий или это должно быть в методе жизненного цикла в React?

0 голосов
/ 06 июня 2018

У меня есть компонент, который отображает форму.Эта форма может подсчитывать расстояние между коллекцией заранее определенных аэропортов.

{
  JFK: { LAX: 2475, LAS: 2248, PDX: 2454 },
  LAX: { JFK: 2475, LAS: 236, PDX: 834 },
  LAS: { JFK: 2248, LAX: 236, PDX: 763 },
  PDX: { JFK: 2454, LAS: 763, LAX: 834 },
}

Этот объект представляет данные, которые я буду получать, как в API.

Форма содержит два раскрывающихся списка выбора / выбора.Один представляет начальную точку, а другой представляет конечную точку.

enter image description here Я поместил весь соответствующий код в функцию с именем handleSumbit, которая должна запускать функцию, которую я импортирую, и которая выведет расстояние между выбранными аэропортами. 

handleSubmit(e) {
    e.preventDefault();

    function returnAirPort(airport) {
      return airport;
    }

    var starting = document.getElementById('starting'),
        destination = document.getElementById('destination'),
        startingEventVal,
        destinationEventVal;

    starting.addEventListener('change', function(e) {
      startingEventVal = returnAirPort(e.srcElement.value);
      console.log('startingEventVal', startingEventVal);
    });

    destination.addEventListener('change', function(e) {
      destinationEventVal = returnAirPort(e.srcElement.value);
      console.log('destinationEventVal', destinationEventVal);
    });

    (function(startingEventVal, destinationEventVal) {
      var distance = IntentMedia.Distances.distance_between_airports(startingEventVal, destinationEventVal);
      console.log("distance", distance);

      document.getElementById('feedback').innterHTML = distance
    })(startingEventVal, destinationEventVal);
  }

Сейчас все, что я получаю в консоли, это -1;значение, которое можно получить, если невозможно определить расстояние или вы ввели неверный аэропорт ?!Разве я не должен, по крайней мере, получать то же самое в DOM?

Это форма: 

      <form onSubmit={this.handleSubmit}>
        {console.log(airportNames)}
        <div className="row">
          <div className="twelve columns">
            <h2>The following are our available flights</h2>
            <p>
              If your airport exists in the following dropdown we can supply the distance in miles or Kilometers below
              between them.
            </p>

            <label htmlFor="exampleEmailInput">Your Starting Airport</label>
            <select id="starting" className="u-full-width">
              <option defaultValue> -- select an option -- </option>
              {airportNames}
            </select>
          </div>
          <div className="twelve columns">
            <label htmlFor="exampleEmailInput">Your destination</label>
            <select id="destination" className="u-full-width">
              <option defaultValue> -- select an option -- </option>

              {airportNames}
            </select>
          </div>
        </div>
        <p id="feedback" />
        <button>Submit</button>
      </form>

Так что мой вопрос в том, как мне отрендерить DOM расстояние междувыбранные аэропорты?

Заранее спасибо!

...