ReactJs: Prevenire più volte premere il tasto

Question

Nel mio componente React ho un pulsante che serve per inviare alcuni dati su AJAX quando si fa clic. Devo accadere solo la prima volta, cioè per disabilitare il pulsante dopo il suo primo utilizzo.

Come sto cercando di fare questo:

var UploadArea = React.createClass({ 

    getInitialState() { 
    return { 
     showUploadButton: true 
    }; 
    }, 

    disableUploadButton(callback) { 
    this.setState({ showUploadButton: false }, callback); 
    }, 

    // This was simpler before I started trying everything I could think of 
    onClickUploadFile() { 
    if (!this.state.showUploadButton) { 
     return; 
    } 
    this.disableUploadButton(function() { 
     $.ajax({ 
     [...] 
     }); 

    }); 
    }, 

    render() { 
    var uploadButton; 
    if (this.state.showUploadButton) { 
     uploadButton = (
     <button onClick={this.onClickUploadFile}>Send</button> 
    ); 
    } 

    return (
     <div> 
     {uploadButton} 
     </div> 
    ); 
    } 

}); 

Quello che penso accade è lo stato variabile showUploadButton non essere aggiornato subito, che la Reagire docs dice è previsto.

Come si può far applicare il pulsante per disabilitarlo o andare via tutto insieme nell'istante in cui viene fatto clic?

Answer 1

Ciò che si potrebbe fare è disattivare il pulsante dopo aver fatto clic e lasciarlo nella pagina (elemento non selezionabile).

per raggiungere questo obiettivo è necessario aggiungere un ref all'elemento tasto

<button ref="btn" onClick={this.onClickUploadFile}>Send</button> 

e poi sulla funzione onClickUploadFile disabilitare il pulsante

this.refs.btn.setAttribute("disabled", "disabled"); 

È quindi possibile lo stile del pulsante disattivato di conseguenza per dare qualche feedback per l'utente con

.btn:disabled{ /* styles go here */} 

Se necessario, assicurarsi di reen grado con

this.refs.btn.removeAttribute("disabled"); 

Aggiornamento: il modo preferito di arbitri movimentazione in React è con una funzione e non una stringa.

<button 
    ref={btn => { this.btn = btn; }} 
    onClick={this.onClickUploadFile} 
>Send</button> 


this.btn.setAttribute("disabled", "disabled"); 
this.btn.removeAttribute("disabled"); 

ecco un piccolo esempio utilizzando il codice che hai fornito https://jsfiddle.net/69z2wepo/30824/

Answer 2

testato come lavora uno: http://codepen.io/zvona/pen/KVbVPQ

class UploadArea extends React.Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
     isButtonDisabled: false 
    } 
    } 

    uploadFile() { 
    // first set the isButtonDisabled to true 
    this.setState({ 
     isButtonDisabled: true 
    }); 
    // then do your thing 
    } 

    render() { 
    return (
     <button 
     type='submit' 
     onClick={() => this.uploadFile()} 
     disabled={this.state.isButtonDisabled}> 
     Upload 
     </button> 
    ) 
    } 
} 

ReactDOM.render(<UploadArea />, document.body);