¿Cómo puedo apuntar a un elemento de reacción diferente dentro del mismo componente cuando hago clic en un botón y cómo puede funcionar esto cuando reutilizo el componente varias veces en mi App.js?
Creé un componente de reacción que tiene un div y un botón. De forma predeterminada, oculté el div creando un estilo CSS "oculto" y dándole al div la clase "oculto". Ahora, lo que quiero lograr es que cuando haga clic en el botón, llamará a una función que hará que el div se vuelva visible al eliminar la clase oculta de su lista de clases. Mi componente de reacción se creó con clase y estoy vinculando la palabra clave "esto" en el constructor.
Ahora me he adelantado para llamar al componente reutilizable anterior en cuatro lugares en mi App.js. En la primera instancia del componente, cuando hago clic en el botón, el div se vuelve visible como se esperaba, pero en otros casos, cuando hago clic en los botones, los otros div correspondientes no se vuelven visibles como se esperaba por instancia del componente. Entonces, el clic de mi botón solo afecta la primera instancia de mi componente de reacción, mientras que el resto no actúa en consecuencia.
Esta es la función a la que llamo haciendo clic en el botón
handleFinish() { console.log("CLickedddd"); const editBtn = document.querySelectorAll(".ResetButton"); for (let i = 0; i < editBtn.length; i++) { editBtn[i].classList.remove("hidden"); }Este es el botón y div:
<button id="finish" onClick={this.handleFinish}> Finish </button> <div style={{height: 300, width: 300, backgroundColor: "red"}} class="hidden"> </div>Debe usar una variable de estado para controlar la visibilidad de su div.
class App extends Component { constructor() { super(); this.state = { hidden: false }; } handleFinish = () => { console.log("CLickedddd"); this.setState({ hidden: !this.state.hidden }); }; render() { return ( <> <button id="finish" onClick={this.handleFinish}> Finish </button> <div style={{ height: 300, width: 300, backgroundColor: "red" }} className={this.state.hidden ? "hidden" : ""} ></div> </> ); } }Ver este arenero
Puedes probar de esta manera:
export default function App() { const handleFinish = () => { const myDiv = document.getElementById("myDiv"); myDiv.classList.remove("hidden"); }; return ( <div className="App"> <button id="finish" onClick={handleFinish}> Finish </button> <div id="myDiv" style={{ height: 300, width: 300, backgroundColor: "red" }} className="hidden" ></div> </div> ); } puede asignar una identificación o className al div de destino, y en el controlador onClick puede eliminar la clase del div.
Aquí está el código de trabajo y la caja .
Pero, mejor que esto, si desea hacer más como una forma de reacción, puede crear un estado para la visibilidad de este div y simplemente actualizar el estado para que ese div sea visible. Como esto:
export default function App() { const [divVisibility, setDivVisibility] = useState(false); const handleFinish = () => { setDivVisibility(true); }; return ( <div className="App"> <button id="finish" onClick={handleFinish}> Finish </button> <div id="myDiv" style={{ height: 300, width: 300, backgroundColor: "red" }} className={divVisibility ? "" : "hidden"} ></div> </div> ); }Y, aquí está la caja de arena para ello.
#PD : he usado CSS para la clase hidden para que en realidad no muestre ninguno. y espero que hayas usado algo similar a CSS o hayas usado el framework que proporciona esta clase.