Nuevo para reaccionar, actualmente tengo una lista de botones asignados en función de una respuesta de API como esta:
render() { return( <div> <h4>User Status:</h4> <div className='buttonContainer'> {this.state.data.map((status => <li key={status.key}> <button id={status.key} value = {status.text} onClick={this.nextStep}/> {status.text} </button> </li> ))} </div> </div> ) }La función nextStep cambia el estado de un usuario a cualquiera que sea el valor del botón presionado (todo basado en los datos). Sin embargo, no quiero que un usuario pueda presionar un botón varias veces. ¿Cómo puedo deshabilitar el botón que se presionó sin deshabilitar todos los botones de la lista?
Simplemente agregue el indicador isDisabled en su matriz de datos de estado. Como debajo del código
[{key: 1, text: 'aa', isDisabled: true}, {key: 1, text: 'ab', isDisabled: false}]actualice este indicador isDisabled en el evento Button onClick. En función de este indicador isDisabled, puede desactivar el clic del botón.