Tengo 3 botones Cancelar, Atrás, Continuar respectivamente. cuando presione la tecla de tabulación que debería ir a los botones Continuar, Cancelar, Atrás.
¿Cómo podemos hacer eso en React, Javascript? Consulte https://codesandbox.io/s/crazy-ishizaka-cnr5k?file=/src/App.js
export default function App() { return ( <div className="App"> <button tabIndex="2">submit 1</button> <button tabIndex="3">submit 2</button> <button tabIndex="1">submit 3</button> </div> ); }este código anterior no funciona como esperaba. Sugiera una solución eficiente para esto.
Lo primero sobre tabIndex es que actuaría de forma extraña si desea saltar directamente a los botones y entradas. Después de algunas investigaciones sobre su problema, descubrí que debe hacer dos cosas:
<!DOCTYPE html> <html lang="en" style="all: initial;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="theme-color" content="#000000" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> <title>React App</title> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"></div> </body> </html>Cambié la etiqueta HTML y agregué el estilo en la segunda línea.
export default function App() { return ( <div className="App" tabIndex={1}> <button tabIndex={3}>submit 1</button> <button tabIndex={4}>submit 2</button> <button tabIndex={2}>submit 3</button> </div> );He bifurcado tu codesandbox y puedes acceder a él con este enlace: https://codesandbox.io/s/dawn-hill-1br66?file=/src/App.js