如果能帮助我实现指针事件的变通方法:在IE9中没有我的React按钮组件,我将非常感激。我使用此按钮提交表单。我将一个道具传递给按钮,根据这个道具的值,按钮将具有不同的样式。
当我的按钮接收到新的prop值时,我使用componentWillReceiveProps来更改它的状态和样式。
我在这里试图实现的是: submitState是'‘then clicks是允许的。submitState为“正在加载”或“成功”,则禁用单击该按钮。
我遇到的问题是,当组件挂载时,我最终会尝试查询不存在的选择器。我在这里做错了什么?我怎样才能让下面的代码工作?
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;
}发布于 2017-09-14 13:45:44
按钮容器的.loading和.success似乎不会同时共存。在更改选择器之前,使用if语句确保选择器的元素存在。
// Same to .success
let button = document.querySelector('.myButtonContainer.loading .myButton');
if (button) {
button.style.cursor = 'default';
button.disabled = 'true';
}https://stackoverflow.com/questions/46210322
复制相似问题