反應：CSS指針事件的解決方法：在IE9中無效

我希望在實現指針事件的解決方法方面有一些幫助：無到IE9中的React按鈕組件。我使用這個按鈕來提交表單。我將一個道具傳遞給該按鈕，並根據此道具的值，該按鈕將具有不同的樣式。反應：CSS指針事件的解決方法：在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; 
}

來源

2017-09-14 bramO

似乎按鈕容器.loading和.success不會同時並存。使用if語句確保選擇器的元素在改變之前存在。

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

來源

2017-09-14 05:45:44 leaf

反應：CSS指針事件的解決方法：在IE9中無效

回答

相關問題