ReactJs：複数回ボタンを押さないようにする

Question

私のReactコンポーネントには、クリックするとAJAXでデータを送信するボタンがあります。私は最初に起こる必要があります。つまり、最初に使用した後にボタンを無効にする必要があります。

はどのように私はこれをやろうとしている：

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> 
    ); 
    } 

}); 

私はたまたまだと思うどんな変数showUploadButton状態がインクルードはドキュメントが期待されていると言う反応して、すぐに更新されていません。

ボタンをクリックした直後に、無効にするか、または一緒に消えるようにボタンを強制することができますか？

Answer 1

あなたができることは、クリックされた後にボタンを無効にして、それをページに残すことです（クリック可能な要素ではありません）。あなたは、ボタン要素に

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

を参照を追加しonClickUploadFile関数にあなたが、その後与えることに応じて無効化ボタンのスタイルを設定することができ、ボタン

​​

を無効にする必要があり、これを達成するために

ユーザーへのフィードバック

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

必要に応じて、可能なアップデート

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

とそれ：リアクトで取り扱い、参考文献の好ましい方法は、機能ではなく文字列です。ここ

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


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

を使用すると、1つの作業として試験 https://jsfiddle.net/69z2wepo/30824/

Answer 2

を提供されたコードを使用して小さな例です：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);