es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Botón mostrar/ocultar basado en el estado de React.

29 Jul, 2023 Programación

Tengo un botón llamado “descargar”, es un componente. La funcionalidad está escrita en un contenedor.

Quiero que el botón esté oculto por defecto, a menos que la condición “(i === número)” sea verdadera en la función de descarga.

Sin embargo, es complicado, ya que esta condición solo se validará cuando haga clic en “descargar”. No estoy seguro de cómo validar esta lógica de antemano para determinar si el botón debe mostrarse o no.

¿Puede ayudarme, por favor? Estoy tratando de establecer un estado para mostrar el botón, pero no funciona.

Mi código básicamente se ve así:

contenedor:

state = {
showButton: false,
};

componentDidMount() {
this.download();
};

download = async () => {
const data = await this.props.client
.query({
query: numberQuery,
fetchPolicy: “no-cache”,
})
// recuperar datos de la query de números ….
const contentData = data.data.content;

// recuperar y formatear números
const numbers = this.getNumbers(contentData);

// llamar a la función getNumber y obtener el número individual aquí
const number = await this.getNumber();

numbers.forEach((i) => {
// esto es para verificar si los números contienen el número de getNumber(), si
// el número coincide con el número en numbers
if (i === number) {
this.setState({
showButton: true,
});
// llamar a las funciones, iniciar la descarga
};
});
};

render() {
return (
{this.state.showButton ?
this.download()}
/> : null}
);
};

componente:

class Download extends Component {
state = {
startDownload: false,
};

startDownload = () => {
this.props.onStartDownload();
};

render() {
return (



);
};
};

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr la funcionalidad deseada de ocultar el botón de forma predeterminada y solo mostrarlo cuando la condición sea verdadera, estás en el camino correcto al establecer el estado en el contenedor. Sin embargo, debes actualizar el estado dentro del bucle forEach para cambiar inmediatamente la visualización del componente. Aquí te muestro una forma en que podrías modificar el código para lograr esto:

    contenedor:

    state = {
  showButton: false,
};

async componentDidMount() {
  await this.download();
};

download = async () => {
  const data = await this.props.client.query({
    query: numberQuery,
    fetchPolicy: "no-cache",
  });
  // recuperar los datos de la consulta del número ...
  const contentData = data.data.content;

  // recuperar y formatear los números
  const numbers = this.getNumbers(contentData);

  // llamar a getNumber y obtener el número individual aquí
  const number = await this.getNumber();

  // verificar si el número coincide con el número en numbers
  const shouldShowButton = numbers.some((i) => i === number);
  this.setState({ showButton: shouldShowButton });

  // llamar a las funciones, iniciar la descarga si se hace clic en el botón
  if (shouldShowButton) {
    // iniciar la descarga...
  }
};

render() {
  return (
    <download showbutton="{this.state.showButton}" onstartdownload="{()" ==""> this.download()}
    />
  );
};

    componente:

    const Download = ({ showButton, onStartDownload }) => (
  <fragment>
    {showButton && (
      <button id="download" onclick="{onStartDownload}">
        Descargar
      </button>
    )}
  </fragment>
);

    Una cosa importante a tener en cuenta es que en el contenedor, comprobamos shouldShowButton para establecer el estado y también para determinar si debemos iniciar la descarga o no. Esto evita la necesidad de realizar un seguimiento de startDownload en el estado del componente.

    En el componente, utilizamos un componente funcional en lugar de un componente de clase, ya que solo tiene props y no tiene estado interno. Pasamos la prop showButton para determinar si debemos mostrar o no el botón. También utilizamos el operador de cortocircuito para renderizar condicionalmente el botón.

Comments are closed.