React-даты, как распознать, каким образом пользователь выбирает данные - PullRequest
Новая
       4

React-даты, как распознать, каким образом пользователь выбирает данные

0 голосов
/ 12 мая 2018

Как распознать, если пользователь выбрал данные нажатием кнопки «Ввод» или щелчком мыши?

Ниже мой код: 

<SingleDatePicker
    date={this.state.date}
    isOutsideRange={() => false}
    isDayHighlighted={day => isSameDay(moment(new Date()),moment(day))}
    daySize={30}
    verticalSpacing={2}
    onDateChange={date => {
        this.setState({ date });
        if(date) {
            this.props.onSaveValue(date.unix());
        }
    }}
    displayFormat={this.props.dateFormat}
    focused={this.state.focused}
    numberOfMonths={1}
    placeholder={this.props.dateFormat}
    onFocusChange={({ focused }) =>{
        this.setState({ focused });
        this.props.isCalendarOpen(focused)
    }}
/>

У меня есть простой SingleDatePicker, и я не нашел способа узнать, как Пользователь выбрал данные, без addeventlisener и других слушателей.

1 Ответ

0 голосов
/ 12 мая 2018

Согласно SyntheticEvent Документация для ReactJS,

  1. Чтобы определить, ударил ли Enter, вы можете использовать onChange вызов метода на входе.

  2. Чтобы идентифицировать событие мыши, вы можете использовать onClick, чтобы идентифицировать событие щелчка.Таким образом, код должен выглядеть следующим образом: 

    constructor(props) {
    super(props);
    this.handleEvent = this.handleCommonEvent.bind(this);
}

handleCommonEvent: function(e) {
    if(e.nativeEvent 
       && e.nativeEvent.type 
       && e.nativeEvent.type == 'click'){
         // do something here on mouse click
    } else if(e.nativeEvent 
       && e.nativeEvent.type 
       && e.nativeEvent.type == 'input'){
       // do something here on keyboard input
    }

}

В поле ввода также добавьте следующие элементы: 

<...onClick={ this.handleEvent } onChange={ this.handleEvent }..../>

ПРИМЕЧАНИЕ : e - синтетическое событие.React определяет эти синтетические события в соответствии со спецификацией W3C , поэтому вам не нужно беспокоиться о кросс-браузерной совместимости.

...