Ahora tengo dos botones. Me gustaría obtener el valor de un botón después de hacer clic en un botón.
Códigos de demostración en vivo y caja: obtener el valor del botón
He probado lo siguiente.
import "./styles.css";
import React, { useState } from "react";
export default function App() {
const [position, setPosition] = useState("");
const handleNextStep = (e) => {
console.log("label", e.target.innerHTML);
console.log("label", e.target.innerHTML);
};
return (
<div className="App">
<h1>Hello Click the buttons bellow</h1>
<div className="btn-group my-3 d-flex justify-content-center align-items-center">
<button
type="button"
className={`btn btn-sm mx-2 ${
position === "BottomLeft" ? "btn-info text-white" : "btn-lightDark"
}`}
onClick={() => {
setPosition(position !== "BottomLeft" ? "BottomLeft" : "");
handleNextStep();
}}
>
Bottom Left
</button>
<button
type="button"
className={`btn btn-sm mx-2 ${
position === "BottomRight" ? "btn-info text-white" : "btn-lightDark"
}`}
onClick={() => {
setPosition(position !== "BottomRight" ? "BottomRight" : "");
handleNextStep();
}}
>
Bottom Right
</button>
</div>
</div>
);
}
import "./styles.css";
import React, { useState } from "react";
export default function App() {
const [position, setPosition] = useState("");
const handleNextStep = (e) => {
console.log("label", e.target.innerHTML);
console.log("label", e.target.innerHTML);
};
return (
<div className="App">
<h1>Hello Click the buttons bellow</h1>
<div className="btn-group">
<button
type="button"
className={`btn btn-sm mx-2 ${
position === "BottomLeft" ? "btn-info" : "btn-lightDark"
}`}
onClick={() => {
setPosition(position !== "BottomLeft" ? "BottomLeft" : "");
handleNextStep();
}}
>
Bottom Left
</button>
<button
type="button"
className={`btn btn-sm mx-2 ${
position === "BottomRight" ? "btn-info" : "btn-lightDark"
}`}
onClick={() => {
setPosition(position !== "BottomRight" ? "BottomRight" : "");
handleNextStep();
}}
>
Bottom Right
</button>
</div>
</div>
);
}
pero me sale el error: react-dom.development.js:327 Uncaught TypeError: Cannot read property 'target' of undefined.
¿Que esta mal aquí?
Supongo que por "valor" te refieres a lo que hay dentro de las <button>etiquetas. En cuyo caso, necesita:
const handleNextStep = (e) =>{
console.log('label', e.target.innerHTML)
}
Además, no estoy seguro de cómo lo conseguiría react-dom.development.js:327 Uncaught TypeError: Cannot read property 'target' of undefined. Debería obtener una cadena vacía o undefined.
Solo un nodo lateral: e.target.innerTexttambién funcionará.
Basado en la actualización
handleNextStep = (e) => { espera un par que no envía, por lo que solo necesita pasar el evento de clic a la función de proxy:
<div className="btn-group">
<button
type="button"
className={`btn btn-sm mx-2 ${
position === "BottomLeft" ? "btn-info" : "btn-lightDark"
}`}
onClick={(e) => {
setPosition(position !== "BottomLeft" ? "BottomLeft" : "");
handleNextStep(e);
}}
>
Bottom Left
</button>
<button
type="button"
className={`btn btn-sm mx-2 ${
position === "BottomRight" ? "btn-info" : "btn-lightDark"
}`}
onClick={(e) => {
setPosition(position !== "BottomRight" ? "BottomRight" : "");
handleNextStep(e);
}}
>
Bottom Right
</button>
</div>
https://codesandbox.io/s/weathered-https-s0y2x?file=/src/App.js
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras