Entonces tengo un componente React con un botón que tiene un controlador de clics que usa el atributo data- *. Si esto fue directo Reaccionar, entonces sé cómo obtener el valor del atributo data- *. Sin embargo, estoy aprendiendo a usar TypeScript, así que no tengo idea de cómo obtener acceso a este atributo. Entonces, ¿cuál es la mejor manera de obtener acceso al atributo data- * usando TypeScript?
Este es mi código JSX para el botón:
<button type="button" className="NavLink" data-appMode={ AppMode.MAIN } onClick={ this.handleAppModeClick.bind(this) }>Main</button>
Este es mi controlador para el evento click:
handleAppModeClick(e: React.MouseEvent<HTMLElement>) {
// What code should go here to access the data-appMode attribute?
}
3 respuestas
Use e.currentTarget y luego use el método estándar HTML getAttribute. No se requiere coacción.
const appMode = e.currentTarget.getAttribute('data-appmode');
(tenga en cuenta minúsculas en el nombre del atributo para evitar que las advertencias reaccionen)
currentTarget ya está escrito correctamente.
Si lee las definiciones de los tipos de eventos de React puede ver que MouseEvent extiende SyntheticEvent, que extiende BaseSyntheticEvent, que incluye la propiedad target y currentTarget, entre otros. El tipo HTMLElement que proporciona se aplica a currentTarget, por lo que tiene acceso a todas las cosas correctas. Si usa target, recibirá un error de compilación sobre getAttribute que no es válido para el tipo EventTarget.
¿Cual es la diferencia?
El currentTarget es el elemento donde está poniendo su controlador, onClick. El target es el origen del evento (más aquí). Esto no es necesariamente lo mismo porque los eventos brotan. Vea el PR referenciado en el archivo de definiciones de tipo para una discusión completa de por qué escrito de manera diferente.
Lo más probable es que tenga que usar la sintaxis as, dependiendo de la propiedad a la que desee acceder en e.target.
handleAppModeClick(e: React.MouseEvent) {
const appMode = (e.target as HTMLButtonElement).getAttribute('data-appMode');
}
En su función de evento tiene una variable e, e representa un evento disparado haciendo clic en el botón, e tiene una propiedad de destino, por lo que, para acceder a un atributo desde el elemento que debe hacer:
handleAppModeClick(e: React.MouseEvent<HTMLElement>) {
const target = e.target as HTMLElement;
let attr = target.getAttribute("data-attribute-name-here");
//do something
}
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas relacionadas con la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excluyendo ActionScript). Esta etiqueta rara vez se usa sola, pero a menudo se asocia con las etiquetas [node.js], [json] y [html].