Tengo 2 botones que se muestran en la página Display y Hide . Cuando se hace clic en el botón Hide , quiero ocultar el botón Display .
Estoy usando useState . Hasta cierto punto, puedo able to hide Display more text presente en el botón, pero no todo el botón
Estado inicial- https://ibb.co/jMdH3tq
Cuando se hace clic en el botón Ocultar, el texto de la pantalla desaparece pero el botón permanece: https://ibb.co/Jm5FPNy
const [show, setShow] = useState(false); const hideButton = () => { setShow(true); };Ocultar código de botón:
<div> <button style={{ marginLeft: '190px' }} className="button button1" onClick={() => { clearBooks(); hideButton(); }} > Hide </button> </div>;Mostrar código de botón:
<button className="button button1" style={{ marginLeft: '190px', width: '124px', height: '50px' }} onClick={fetchBooks} > {!show && 'Display more'} </button>;Si está tratando de ocultar el botón, haga lo siguiente: noté que el estado de la demostración está establecido en falso inicialmente y lo está configurando en verdadero al hacer clic. ¿Quiere lo contrario, verdadero como ocultar el estado inicial al seleccionar el botón?
En base a eso, ajuste show en consecuencia, ya sea show o !show
{show && <button className="button button1" style={{ marginLeft: "190px", width: "124px", height: "50px" }} onClick={fetchBooks} > </button> }Una forma más ordenada de hacer esto sería usar el operador ternario con su estado. Cada vez que se hace clic en sus botones, invierten el estado que cambia qué botón se representa en el DOM.
import { useState } from "react"; export default function App() { const [show, setShow] = useState(true); function changeState() { setShow(!show); } return ( <div className="App"> {show ? ( <button onClick={changeState}> Display </button> ) : ( <button onClick={changeState}> Hide </button> )} </div> ); }Si no desea volver a renderizar, puede lograrlo usando clases de la siguiente manera:
pantalla.js
import "./styles.css" export default function MyScreen() { const onButtonPressed = (target) => { document.querySelector('button.hide').classList.remove('hide') target.classList.add('hide') } return ( <div> <button style={{ marginLeft: 190 }} className="button button1 hide" onClick={(element) => { onButtonPressed(element.target) clearBooks() }} > {"Hide"} </button> </div> <div> <button className="button button1" style={{ marginLeft: 190, width: 124, height: 50 }} onClick={(element) => { onButtonPressed(element.target) fetchBooks() }} > {"Display more"} </button> </div> ) }estilos.css
button.hide { display: none; }Este es un ejemplo que prueba la funcionalidad JS:
button.hide { display: none; } <div> <button class="button button1 hide" style="margin-left:190px;width:124px;height:50px" onClick="onButtonPressed(this)" > Hide </button> </div> <div> <button class="button button1" style="margin-left:190px;width:124px;height:50px" onClick="onButtonPressed(this)" > Display more </button> </div> <script> function onButtonPressed(element) { document.querySelector('button.hide').classList.remove('hide') element.classList.add('hide') } </script>