Реакция: обходной путь для событий указателя CSS: нет в IE9

Question

Я был бы признателен за некоторую помощь в реализации обходного пути для событий указателя: ни одного из них для моего компонента React button в IE9. Я использую эту кнопку для отправки формы. Я передаю реквизит кнопке, и, в зависимости от значения этой реквизита, кнопка будет иметь другой стиль.

Я использую componentWillReceiveProps, чтобы изменить состояние и стиль моей кнопки, когда она получает новое значение проп.

Что я пытаюсь достичь здесь: submitState - это '', тогда клики разрешены. 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;
}

Answer 1

Кажется, что .loading а также .success Контейнер кнопки не будет сосуществовать одновременно. использование if заявление, чтобы убедиться, что элемент селектора существует, прежде чем изменить его.

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

Answer 2

      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;
}