Estoy usando el componente Async de react-select para la edición en línea en ag-grid. Hay un evento disponible en el componente de selección de reacción (onChange) que captura el valor y la acción cuando hacemos cambios. Pero cuando presiono el botón Intro para seleccionar un elemento del menú desplegable, no se llama al método onChange. La razón por la que me di cuenta es que se llama al método onBlur después de presionar el botón Intro en el menú desplegable.
A continuación se muestra el ejemplo del componente asíncrono:
<Async className = "async-multi-select" classNamePrefix="react-select" isMulti defaultValue={[]} id={"aync-react-select"} {...this.props} placeholder={""} onFocus = {() => this.handleFocusChange(true)} onBlur = {() => this.handleFocusChange(false)} onChange = {(value,action) => this.handleChange(value,action)} />A continuación se muestran los eventos:
private handleChange(value: any[], action: ActionMeta): void { if (this.props.onChange){ this.props.onChange(value,action) } this.setState({hasSelection: value.length > 0}); } private handleFocusChange(hasFocus: boolean){ this.setState({hasFocus}); }¿Alguna sugerencia de cómo puedo ignorar el evento onBlur que se activará cuando presione el botón Intro?
Supongo que desea el valor del elemento seleccionado de la lista desplegable cuando hace clic en el elemento desplegable. El evento onBlur se activa cuando se aleja de la entrada, y onChange se activa solo cuando realiza cambios dentro del campo de entrada. Entonces, cuando intenta presionar enter en el elemento desplegable, esencialmente se está alejando de la entrada y, por lo tanto, se llama al evento onBlur . Dado que puede presionar el elemento desplegable, puede agregar un complemento onClick en el elemento y pasar el valor del elemento a handleChange junto con la acción. Puede actualizar su componente desplegable a algo como lo siguiente:
<DropDownComponent {...this.props} {/*Other props here*/} onClick={()=> this.handleChange(value,action)} />Si está mapeando estos elementos desplegables, puede obtener el valor del elemento del mapa y la acción debe pasarse manualmente. De esta manera, puede actualizar el valor del elemento desplegable en el que se hace clic.