Warning beim Verwenden eines “a” Links mit “onClick”.
In einer React-Anwendung habe ich einen Link mit einem “onClick” Ereignis verwendet. Der Link selbst ist leer:
<a href="#" onClick={() => this.handleSidebar(true)}>Details</a>
Allerdings sorgte dies für eine unschöne Warnung:
The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md”,
Die Lösung ist dem “#” ein “!” voraus zu stellen:
<a href="!#" onClick={() => this.handleSidebar(true)}>Details</a>
Ergebnis, Warnung weg, Funktion bleibt gleich.
