我很感谢在IE9中对我的React按钮组件实施解决方案的帮助。我使用此按钮提交表格。我将道具传递给按钮,并根据此道具的价值,该按钮将具有不同的样式。
我使用ComponentWillReceiveProps在收到新的道具值时更改状态和按钮的样式。
我在这里要实现的目标:submitstate是"然后允许点击。submistate是"加载"或"成功",然后禁用单击按钮。
我遇到的问题是,我最终试图查询组件安装时不存在的选择器。我在这里做错了什么?如何使我的代码在下面工作?
class Button extends React.Component {
constructor(props) {
super(props);
this.state = {
submitState: this.props.buttonState,
text: 'Click',
textLoad: 'Loading',
textSuccess: 'Success'
}
this.noclickLoad = this.noclickLoad.bind(this);
this.noclickSuccess = this.noclickSuccess.bind(this);
}
loading () {
this.setState({
submitState: 'loading'
});
}
success() {
this.setState({
submitState: 'success'
});
}
disabled() {
this.setState({
submitState: 'disabled'
});
}
nothing() {
this.setState({
submitState: ''
})
}
noclickLoad() {
document.querySelector('.myButtonContainer.loading .myButton').style.cursor = 'default';
document.querySelector('.myButtonContainer.loading .myButton').disabled = 'true';
}
noclickSuccess() {
document.querySelector('.myButtonContainer.success .myButton').style.cursor = 'default';
document.querySelector('.myButtonContainer.success .myButton').disabled = 'true';
}
componentWillReceiveProps(nextProps) {
if(nextProps.submitState === this.props.submitState) {
return
}
switch (nextProps.submitState) {
case 'loading':
this.loading();
break;
case 'success':
this.success();
break;
case '':
this.nothing();
break;
default:
return
}
}
componentDidMount () {
window.addEventListener('load', this.noclickLoad);
window.addEventListener('load', this.noclickSuccess);
}
render() {
return (
<div>
<div className={`myButtonContainer ${this.state.submitState}`}>
<button className="myButton">
<div className="buttonText">{this.state.text}</div>
<div className="buttonTextLoad">{this.state.textLoad}</div>
<div className="buttonTextSuccess">{this.state.textSuccess}</div>
</button>
</div>
</div>
);
}
}
和CSS
.myButtonContainer .myButton {
background-color: red;
}
.myButtonContainer .myButton .buttonTextLoad, .myButtonContainer .myButton .buttonTextSuccess {
display: none;
}
.myButtonContainer.loading .myButton {
background-color: yellow;
}
.myButtonContainer.loading .myButton .buttonTextLoad {
display: block;
}
.myButtonContainer.loading .myButton .buttonText, .myButtonContainer.loading .myButton .buttonTextSuccess {
display: none;
}
.myButtonContainer.success .myButton {
background-color: chartreuse;
}
.myButtonContainer.success .myButton .buttonTextSuccess {
display: block;
}
.myButtonContainer.success .myButton .buttonText, .myButtonContainer.success .myButton .buttonTextLoading {
display: none;
}
看来,按钮容器的 .loading
和 .success
不会同时共存。使用if
语句确保选择器的元素在更改之前存在。
// Same to .success
let button = document.querySelector('.myButtonContainer.loading .myButton');
if (button) {
button.style.cursor = 'default';
button.disabled = 'true';
}
const [loading, setLoading] = useState(false);
<div id='inputArea' className={`input-area${loading ? ' pointerEventNone' : ''}`} aria-disabled={loading}>
//code..
</div>
<button className="myButton" onClick={()=>setLoading(!loading)}>Toggle Button for Disable</button>
CSS:
.pointerEventNone {
pointer-events: none;
}