Datepicker onChange выпуск React

Question

Datepicker onChange выпуск React

В современных браузерах и HTML5 в окне history есть метод под названием pushState. Это изменит URL-адрес и перенесет его в историю без загрузки страницы.

Вы можете использовать его следующим образом: он будет принимать 3 параметра: 1) объект состояния 2) название и URL-адрес):

window.history.pushState({page: "another"}, "another page", "example.html");

Это изменит URL-адрес, но не перезагрузит страницу, также не будет проверять, существует ли страница, поэтому, если вы используете какой-либо код javascript, который будет реагировать на URL-адрес, вы можете работать с ними следующим образом .

Также есть history.replaceState(), который делает точно то же самое, за исключением того, что он изменит текущую историю вместо создания нового!

Также вы можете создать функцию для проверки если существует history.pushState, а затем продолжайте с остальными:

function goTo(page, title, url) {
  if ("undefined" !== typeof history.pushState) {
    history.pushState({page: page}, title, url);
  } else {
    window.location.assign(url);   
  }
}

goTo("another page", "example", 'example.html');

Также вы можете изменить # для <HTML5 browsers, который не перезагрузит страницу, вот как Angular использовать SPA в соответствии с hashtag ...

Изменить # довольно легко, делая:

window.location.hash = "example";

, и вы можете обнаружить его следующим образом:

window.onhashchange = function () {
  console.log("#changed", window.location.hash);
}

0

javascript reactjs

задан Martijn Vissers 18 January 2019 в 15:17

2 ответа

Другие вопросы по тегам:

javascript reactjs

Похожие вопросы:

score 0 · Answer 1

Вероятно, самым простым решением было бы не использовать событие onChange для извлечения данных, а использовать его только для управления вводом и иметь кнопку onClick для извлечения.

score 0 · Answer 2

Я бы не назвал это проблемой производительности. Так как реагирование происходит в одностороннем порядке с привязкой данных, разработчик должен решить, когда вызывать рендеринг (или отложить рендеринг). Виртуальный DOM должен быть синхронизирован.

В дополнение к этому вы можете использовать «onBlur» вместо «onChange», чтобы инициировать изменение только тогда, когда пользователь закончил печатать и сфокусировался.

<Form.Field>
   <label style={{ float: 'left' }}>From</label>
   <input
     ref={i => {
       this.reportDateStartedField = i
       }}
     onBlur={this.handleFieldChange.bind(this)}
     type="date"
     name="reportDateStarted"
     defaultValue={filters.reportDateStarted}
     max={todayDate}
     style={{ fontSize: '0.9em' }}
    />

В приведенном выше случае вход будет «неуправляемым» (defaultValue), так как реагирование не знает об изменении, пока пользователь не сфокусируется на входе.