Tengo un código que deshabilita un botón al hacer clic en él, esto funciona, pero está deshabilitando todos los botones que tengo en la pantalla.
Esta es la parte del código, estoy usando componentes de clase:
constructor(props) { super(props); this.state = { isLoading: false }; } handleFile(file) { const id = file.id; // maybe I can use this id? this.setState({ isLoading: true }); if (document.statusCode == 200) { this.setState({ isLoading: false }); } } _renderButton(text, props) { const isFile = (props.type.toLowerCase() === 'file'); return ( <Row> {isFile && ( <Button disabled={this.state.isLoading} onClick={(e) => { e.stopPropagation(); this.handleFile(props)}} /> )} </Row> ); }¿Cómo puedo deshabilitar solo el botón en el que se hizo clic usando reaccionar? ¿Cómo usar el mapa en esta situación?
Asigne a cada botón un atributo de datos de identificación y use el estado para registrar si se ha hecho clic en ese botón y si se ha deshabilitado en el siguiente procesamiento.
const { Component } = React; class Example extends Component { constructor() { super(); this.state = {}; this.handleClick = this.handleClick.bind(this); } handleClick(e) { const { id } = e.target.dataset; this.setState({ ...this.state, [id]: true }); } createButtons() { const jsx = []; for (let i = 0; i < 10; i++) { const button = <button data-id={i} disabled={this.state[i]} onClick={this.handleClick} >Click me {i} </button>; jsx.push(button); } return jsx; } render() { return ( <div> {this.createButtons()} </div> ); } } ReactDOM.render( <Example />, document.getElementById("react") ); button:disabled { color: red; opacity: 50%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>