ReactJs：防止多次按下按钮

在我的React组件中，我有一个按钮意味着点击时通过AJAX发送一些数据。我只需要第一次发生，即在第一次使用后禁用按钮。ReactJs：防止多次按下按钮

如何我试图做到这一点：

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没有更新向右走，该文档做出反应说，预计。

我该如何强制执行按钮才能禁用或在被点击的瞬间全部离开？

来源

2016-02-10 Iulius Curt

你可以做的是使按钮被禁用后，单击，并将其保留在页面（不可点击的元素）。

要做到这一点，你必须一个引用添加到该按钮元素

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

，然后在onClickUploadFile功能禁用按钮

然后，您可以相应样式禁用的按钮给一些反馈给用户

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

如果需要请确保reen能够将其与

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

这里是一个小例子使用 https://jsfiddle.net/69z2wepo/30824/

来源

2016-02-10 13:09:45 eltonkamami

这让我走了一半，但做出反应小组已弃用给裁判一个字符串值，而是与它一起使用回调：https://reactjs.org/docs/refs-and-the-dom.html – Martin

测试作为工作一个你提供的代码：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);

来源

2016-02-10 13:19:32 zvona

这不会解决问题，因为状态更新被React消除。正因为如此，'this.state.isButtonDisabled'中总会有延迟来获得'false'值。快速连续点击两次仍然会注册2个onClick事件。 – Awol

ReactJs：防止多次按下按钮

回答

相关问题