Блог

У нас есть относительно простой компонент React с input элементом в нем:

 export class MyInput extends Component {
  componentDidMount() {
    function log(e) {
      console.log(`Event: ${e.type}, isTrusted: ${e.isTrusted}, input value: ${e.target.value}`, e);
    }

    this.rawInput.addEventListener("change", log);
    this.rawInput.addEventListener("input", log);
  }

  onChanged(e) {
    console.log("raw-input.onChanged: e.target.value", e.target.value);

    this.props.onChanged(e.target.value);
  }

  render() {
    return (
      <div className="my-class">
        <input
          value={this.props.value}
          onChange={this.onChanged.bind(this)}
          ref={(input) => { this.rawInput = input; }}
          />
      </div>
    );
  }
}
  

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

Он отлично справляется с вводом текста при обычном использовании, он также обрабатывает SendKeys Selenium WebDriver в Chrome, Firefox и IE 11 (при условии, что WebDriver EnableNativeEvents есть true ).

Однако при запуске в Internet Explorer 11 с помощью WebDriver и с EnableNativeEvents = false помощью, onChanged событие не запускается при SendKeys выполнении. Что самое странное input , так это то, что запускается событие HTML. Ниже приведен вывод консоли:

Обратите внимание, что входные value данные меняются во время ввода «test», но нет onChange .

Ниже приведено расширенное input событие в случае WebDriver:

Если пользователь затем вводит с клавиатуры тот же ввод, onChange событие есть:

Ниже приведено расширенное input событие в случае ввода пользователем:

Тщательный анализ показывает, что единственное различие в input событиях заключается в том, что при WebDriver isTrusted: false , в то время как при реальном наборе isTrusted: true текста .

Вопрос в том, почему в первом случае onChange события не запускаются React?

Я предполагаю, что это связано с тем, что React пропускает события, isTrusted: false потому что это означает, что они имитируются, а не реальные пользовательские события. Однако я не смог найти никаких доказательств этого. Если это так, не могли бы вы предоставить ссылку на сообщение или строку в источниках React, которая его обрабатывает?

• Реакция: 16.7.0
• Селен.WebDriver.IEDriver: 3.14.0

При установке nativeEvents возможности false (которую вы устанавливаете с EnableNativeEvents помощью свойства) вы указываете драйверу IE использовать JavaScript для имитации событий. События, моделируемые с помощью JavaScript, не могут иметь свойство isTrusted, равное true. Это свойство предназначено для точного определения сценария, с которым вы сталкиваетесь. Реализации драйверов для Firefox и Chrome создаются и поддерживаются поставщиками для этих браузеров (Mozilla и Google соответственно), и, таким образом, эти драйверы имеют доступ к внутренним функциям браузера способами, которых нет (и, вероятно, никогда не будет) у драйвера IE. Если React действительно отключает это свойство для запуска onChanged события, то здесь задано правильное EnableNativeEvents = true действие.