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

Question

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

Ниже мой код:

<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 и другие слушатели.

Answer 1

Согласно документации 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, поэтому вам не нужно беспокоиться о кросс-браузерной совместимости.