Совокупность совокупности событий, чтобы заполнить яму ввод ввода ввода реагирования входное событие Onchange

внешний интерфейс React.js 
...
<input ref="inputTest" type="text" placeholder="测试" value={this.state.val}
onChange={this.inputValue}/>
...
inputValue(e){
    this.setState({
        val:e.target.value
    })
}

Вышеприведенный код, думаю, всем знаком, простейший каштан реактивного контролируемого компонента, контролируемого входного компонента. Прежде всего, давайте поговорим о событиях React, в том числе о событии onChange, которое мы использовали выше, которые относятся к синтетическим событиям React, то есть не нативным событиям браузера, которые инкапсулируют нативные события браузера. В синтетическом событии реакции событие onChange аналогично нативному событию ввода. Оно будет срабатывать до тех пор, пока нажата клавиша. Это не вызовет никаких проблем на ПК или методе ввода на английском языке, но для мобильного ввода это необходимо переключить китайский метод ввода или другой другой ввод.Для пользователей других языков французского это будет иметь большое значение. Например, в приведенном выше простейшем коде мы хотим ввести китайский язык, такой как «событие», нам нужно нажать клавишу «шицзянь» на клавиатуре мобильного телефона, при каждом нажатии клавиши будет запускаться событие onChange, и тогда мы обнаружим, что содержимое поля ввода было введено английскими буквами, это не тот результат, который нам нужен. Как это решить? Далее выходит наш главный герой --compositionEvent. Объединение событий может помочь нам решить эту проблему, см.Справочная документация по составным событиям.

Введение в событие композиции

Давайте по-прежнему возьмем китайский ввод в качестве примера.Вы обнаружите, что на мобильных устройствах китайский ввод фактически разделен на три этапа (то же самое верно и для ПК): 1: Пуск, 2: Введите на клавиатуре, 3: Нажмите, чтобы выбрать Китайский язык. Это композиционное событие представляет собой комбинацию событий, разделяющих разные этапы. Это комбинационное событие представляет собой комбинацию трех событий: CompositionStart, CompositionUpdate и CompositionEnd. События Start и End выполняются только один раз, а Update будет выполняться несколько раз, пока поскольку китайский язык не выбран. Раньше запускалось событие обновления, выделялся выделенный текст, запускалось событие окончания, завершалось комбинированное событие, и цикл повторялся. После понимания принципа объединения событий решение понять несложно.

Как заполнить яму

1. Использовать метод неуправляемых компонентов и отбросить событие onChange

Использование этого метода в основном такое же, как эффект браузера ПК.Пожалуйста, см. следующий код.Добавлен только мониторинг End в комбинированном событии, что означает, что мониторинг будет запущен только после того, как мы завершим операцию выбора в последний шаг ввода. Всем должно быть интересно, разве это не эффект onInput, тогда он может поддерживать способ контролируемых компонентов, извините, это действительно не может, потому что ввод действительно идеально подходит, но операция удаления не может вызвать этот мониторинг. Итак, если вы не добавляете событие onChange, используйте неуправляемый компонент.

<input ref="inputTest" type="text" placeholder="测试" 
              onCompositionEnd={this.handleComposition} />

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

Решение для контролируемого компонента было упомянуто выше, которое должно взаимодействовать с событием onChange, Как взаимодействовать с ним, пожалуйста, смотрите код следующим образом:

<input ref="inputTest" type="text" placeholder="测试" 
              onCompositionStart={this.handlingComposition} 
              onCompositionUpdate={this.handlingComposition} 
              onCompositionEnd={this.handleComposition} 
              onChange={this.inputValue}/>
...
handlingComposition(){
    this.isCompositionEnd = false;
}
handleComposition(e){
    this.isCompositionEnd = true;
}
inputValue(e){
    if(this.isCompositionEnd){
        this.setState({
            val:e.target.value
        })
    }
}

В приведенном выше коде есть небольшая проблема: необходимо обеспечить onCompositionEnd до того, как будет запущено событие onChange, как только возникнут проблемы с совместимостью браузера, порядок выполнения обоих наоборот приведет к тому, что событие onChange никогда не сработает, поэтому лучше повторить в handleComposition Функция onChange выполняет логику, чтобы избежать проблем с совместимостью. Front-end разработки с каждым днем, обмен также хороший способ узнать, а не место, пожалуйста, распылите!

Категории