ReactJs: Ngăn chặn nhiều lần nhấn nút

Question

Trong thành phần React của tôi, tôi có một nút để gửi một số dữ liệu qua AJAX khi được nhấp. Tôi chỉ cần xảy ra lần đầu tiên, tức là tắt nút sau lần sử dụng đầu tiên.

Làm thế nào tôi đang cố gắng để làm điều này:

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

}); 

Những gì tôi nghĩ sẽ xảy ra là trạng thái biến showUploadButton không được cập nhật ngay lập tức, mà Phản ứng tài liệu cho biết dự kiến.

Làm cách nào tôi có thể thực thi nút bị vô hiệu hóa hoặc biến mất tất cả cùng lúc ngay khi nút được nhấp?

Answer 1

Điều bạn có thể làm là tắt nút sau khi được nhấp và để nút đó trong trang (không phải phần tử có thể nhấp).

Để đạt được điều này bạn cần phải thêm một ref để các yếu tố nút

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

và sau đó vào chức năng onClickUploadFile tắt nút

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

Sau đó bạn có thể tạo kiểu nút khuyết tật phù hợp để cung cấp cho một số phản hồi cho người dùng với

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

Nếu cần đảm bảo quay lại có thể nó với

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

Cập nhật: cách ưa thích của refs xử lý trong Phản ứng là với một chức năng và không phải là một chuỗi.

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


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

đây là một ví dụ nhỏ sử dụng mã mà bạn cung cấp https://jsfiddle.net/69z2wepo/30824/

Answer 2

Tested như làm việc một: 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);