ReactJs:防止多次按下按钮
ReactJs:防止多次按下按钮
提问于 2016-02-10 12:54:19
在我的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没有被立即更新，React说这是预期的。
我怎样才能强制按钮被禁用，或者在它被点击的时候完全消失？
回答 13
Stack Overflow用户
回答已采纳
发布于 2016-02-10 13:09:45
您可以做的是在单击按钮后禁用该按钮，并将其保留在页面中(不能单击元素)。
要实现这一点，您必须向按钮元素添加一个ref。
<button ref="btn" onClick={this.onClickUploadFile}>Send</button>然后在onClickUploadFile函数上禁用按钮
this.refs.btn.setAttribute("disabled", "disabled");然后，您可以相应地设置禁用按钮的样式，以便向用户提供一些反馈。
.btn:disabled{ /* styles go here */}如果需要，请确保用
this.refs.btn.removeAttribute("disabled");更新：--处理React中引用的首选方法是使用函数而不是字符串。
<button
ref={btn => { this.btn = btn; }}
onClick={this.onClickUploadFile}
>Send</button>
this.btn.setAttribute("disabled", "disabled");
this.btn.removeAttribute("disabled");更新:使用react钩子的
import {useRef} from 'react';
let btnRef = useRef();
const onBtnClick = e => {
if(btnRef.current){
btnRef.current.setAttribute("disabled", "disabled");
}
}
<button ref={btnRef} onClick={onBtnClick}>Send</button>下面是一个使用您提供的https://jsfiddle.net/69z2wepo/30824/代码的小示例
Stack Overflow用户
发布于 2018-04-04 02:59:11
解决方案是在进入处理程序时立即检查状态。React保证在浏览器事件边界处刷新交互事件(例如单击)中的setState。参考文献：https://github.com/facebook/react/issues/11171#issuecomment-357945371
// In constructor
this.state = {
disabled : false
};
// Handler for on click
handleClick = (event) => {
if (this.state.disabled) {
return;
}
this.setState({disabled: true});
// Send
}
// In render
<button onClick={this.handleClick} disabled={this.state.disabled} ...>
{this.state.disabled ? 'Sending...' : 'Send'}
<button>Stack Overflow用户
发布于 2016-02-10 13:19:32
测试为工作之一：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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35315872
复制相关文章
相似问题
腾讯云开发者
