React：CSS 指针事件的解决方法：IE9 中没有

Posted 2023-02-24

【中文标题】React：CSS 指针事件的解决方法：IE9 中没有

【英文标题】：React: workaround for CSS pointer-events: none in IE9

【发布时间】：2017-09-14 04:03:43

【问题描述】：

在实现指针事件的解决方法时，我将不胜感激：在 IE9 中我的 React 按钮组件没有。我使用此按钮提交表单。我将一个道具传递给按钮，并且根据该道具的值，按钮将具有不同的样式。

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

我在这里想要实现的目标：submitState 是 '' 然后允许点击。 submitState 是 'loading' 或 'success' 然后禁止点击按钮。

我遇到的问题是我最终尝试查询组件安装时不存在的选择器。我在这里做错了什么？如何使下面的代码正常工作？

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;

【参考方案1】：

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

// Same to .success
let button = document.querySelector('.myButtonContainer.loading .myButton');
if (button) 
    button.style.cursor = 'default';   
    button.disabled = 'true';