Estoy creando una aplicación web de reacción para ayudar a mi aprendizaje. Estoy tratando de crear una tabla que muestre algunos artículos ficticios para comprar. Al final de cada fila, quiero un botón que compre ese artículo para el usuario.
La cantidad de elementos enumerados puede cambiar con el tiempo, por lo que quiero que el diseño sea dinámico. El código principal es sólido, por lo que almaceno las direcciones de cada artículo en una matriz en el estado y luego el botón solicita al usuario que envíe dinero a la dirección del artículo.
Quiero que el botón lleve la dirección de la fila a una función 'buyItem'. Los dos problemas que encuentro son que, al volver a cargar, el botón parece activarse automáticamente. Y eso, cuando se hace clic, no parece estar pasando la dirección de esa fila, sino toda la matriz. es decir, quiero que se pase la dirección [i] para el botón en cada fila.
<tbody> {this.state.address.map((d) => ( <tr> <td> <button type="button" className='create-btn' onClick={this.buyItem(d)}>Buy!</button> </td> </tr> ))} </tbody>¿Se le permite pasar una variable a una función a través de un botón y cómo haría para hacerlo en el escenario anterior?
Cuando dice onClick = {this. buyItem(d)} , está llamando a la función cuando crea el elemento de botón. En su lugar, desea crear una función de devolución de llamada dentro de onClick , algo como:
onClick = {() => this.buyItem(d)}Aquí, está definiendo la función, no llamándola, por lo que no se activará automáticamente cuando se cargue.