Tengo una lista de archivos y un botón que descarga cada archivo, creé un estado para deshabilitar el botón cuando el usuario hace clic y habilitarlo cuando comienza la descarga.
Este es el botón:
<Button disabled={this.state.disabled} onClick={(e) => { e.stopPropagation(); this.isDownload(props)}} />Y este es el código con la función de descarga.
import React from 'react'; import autoBind from 'react-autobind'; constructor(props) { super(props); autoBind(this); } async isDownload(file) { this.setState({ disabled: true }); console.log('start the download'); const document = await this.props.getFile(fileId); if (document.statusCode == 200) { this.setState({ disabled: false }) }; }Esto funciona, sin embargo, deshabilita todos los botones y solo necesito deshabilitar el botón en el que hice clic. ¿Cómo puedo hacer esto?
¡Gracias!
Solo tiene una propiedad de estado para controlar todos sus botones, es por eso que cuando la cambia en un botón, afecta a todos.
Su lógica es sólida, pero debe crear una propiedad disabled para cada botón o crear una matriz de valores booleanos donde el índice 0 corresponde al primer botón, el índice 1 al segundo, etc.
Luego, su isDownload debería recibir el índice de qué botón desea deshabilitar y cambiar solo ese elemento de la matriz.
Su botón entonces sería algo como esto:
<Button disabled={this.state.disabled[0]} onClick={(e) => { e.stopPropagation(); this.isDownload(props, 0)}} />Esto, por supuesto, para el primer botón (observe el índice 0). Sin embargo, si la lógica y el comportamiento de todos los botones es similar, debería considerar usar una matriz y mapearla para representar sus objetos. Mire la función de mapa de JavaScript, que ya le proporciona el índice de cada elemento de la iteración.
Estás a mitad de camino. Me imagino que el problema es que cada botón comparte el mismo estado disabled . Esto significa que necesita una forma de identificar de forma única el botón que desea desactivar. Me gustaría que pudieras compartir un poco más sobre cómo se representan estos botones, pero la forma más fácil es acceder al botón directamente.
<Button disabled={this.state.disabled} onClick={(e) => { e.stopPropagation(); // Notice we are passing the target directly here this.isDownload(props, e.target) }} />y en su controlador de clics:
async isDownload(file, btn) { btn.disabled = true; console.log('start the download'); const document = await this.props.getFile(fileId); if (document.statusCode == 200) { btn.disabled = false; }; }De lo contrario, necesitaría un estado deshabilitado para cada botón, a menos que necesite saber el estado del botón en otra parte de su aplicación o componente, podría estar bien modificando el atributo deshabilitado directamente. Sin embargo, tenga en cuenta que no lo volverá a habilitar si la solicitud falla en su ejemplo, así que tenga eso en cuenta.
EDITAR: Un ejemplo de trabajo aquí