首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >React: IE9中CSS指针事件的解决方法:无

React: IE9中CSS指针事件的解决方法:无
EN

Stack Overflow用户
提问于 2017-09-14 12:03:43
回答 1查看 809关注 0票数 0

如果能帮助我实现指针事件的变通方法:在IE9中没有我的React按钮组件,我将非常感激。我使用此按钮提交表单。我将一个道具传递给按钮,根据这个道具的值,按钮将具有不同的样式。

当我的按钮接收到新的prop值时,我使用componentWillReceiveProps来更改它的状态和样式。

我在这里试图实现的是: submitState是'‘then clicks是允许的。submitState为“正在加载”或“成功”,则禁用单击该按钮。

我遇到的问题是,当组件挂载时,我最终会尝试查询不存在的选择器。我在这里做错了什么?我怎样才能让下面的代码工作?

代码语言:javascript
复制
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

代码语言:javascript
复制
.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;
}
EN

回答 1

Stack Overflow用户

发布于 2017-09-14 13:45:44

按钮容器的.loading.success似乎不会同时共存。在更改选择器之前,使用if语句确保选择器的元素存在。

代码语言:javascript
复制
// Same to .success
let button = document.querySelector('.myButtonContainer.loading .myButton');
if (button) {
    button.style.cursor = 'default';   
    button.disabled = 'true';
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46210322

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档