title: React: workaround for CSS pointer-events: none in IE9
body: <p>I would appreciate some help in implementing a workaround for pointer-events: none to my React button component in IE9.  I use this button to submit a form. I pass down a prop to the button and, based on the value of this prop, the button will have different styling. </p>
  
  <p>I use componentWillReceiveProps to change the state and the styling of my button when it receives the new prop value.</p>
  
  <p>What I am trying to achieve here: submitState is '' then clicks are allowed. submitState is 'loading' or 'success' then disable click on the button.</p>
  
  <p>The issue I have is that I end up trying to query selectors that don’t exist when the component mounts. What am I doing wrong here? How can I make my code below work? </p>
  
  <pre><code>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 (
        &lt;div&gt;
          &lt;div className={`myButtonContainer ${this.state.submitState}`}&gt;
            &lt;button className="myButton"&gt;
              &lt;div className="buttonText"&gt;{this.state.text}&lt;/div&gt;
              &lt;div className="buttonTextLoad"&gt;{this.state.textLoad}&lt;/div&gt;
              &lt;div className="buttonTextSuccess"&gt;{this.state.textSuccess}&lt;/div&gt;
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>And the css</p>
  
  <pre><code>.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;
  }
  </code></pre>