React : CSS 포인터 이벤트의 해결 방법 : IE9의 없음

Question

포인터 이벤트에 대한 해결 방법을 구현하는 데 도움이 될만한 답변을 보내 주시면 감사하겠습니다. 이 버튼을 사용하여 양식을 제출합니다. 버튼에 소품을 건 드리면이 소품의 가치에 따라 버튼의 스타일이 달라집니다.

새로운 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'; 
}