React：CSSポインタイベントの回避策：IE9ではなし

Question

ポインタイベントの回避策を実装する際には助けていただきたいと思います。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; 
} 

Answer 1

ボタンのコンテナの.loadingと.successが同時に共存しないだろうと思われます。 ifステートメントを使用してセレクタの要素が変更される前に存在することを確認します。

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