ReactJS中狀態更改後無法正確呈現的內嵌樣式

Question

我試圖將簡單狀態更改應用於React中的按鈕。

'use strict'; 
class ReactButton extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = {hovering: false}; 
    } 

    onClick() { 
    this.props.handleClick(this.props.text); 
    } 

    onHover() { 
    this.setState({ 
     hovering: !this.state.hovering 
    }); 
    } 

    render() { 
    const color = this.state.hovering ? 'blue' : 'default'; 
    const text = this.state.hovering ? 'Hover Text' : this.props.text; 
    console.log(color, text); 
    return (
     <button 
      onClick={this.onClick.bind(this)} 
      style={{color: color}} 
      onMouseEnter={this.onHover.bind(this)} 
      onMouseOut={this.onHover.bind(this)}> 
       {text} 
     </button> 
    ); 
    } 
} 

ReactDOM.render(
    <ReactButton 
    text={"Original Text"} 
    handleClick={(e) => console.log('clicked')} />, 
    document.querySelector('#container') 
); 

如果take a look at the demo你會發現，文本顏色變爲藍色按鈕時，盤旋着，但是當鼠標離開文本顏色呈藍色按鈕。事件被解僱，狀態確實發生改變，觸發重新呈現，正如文本更改所證明的那樣。

爲什麼反應沒有更新內聯樣式？我能做些什麼來解決這個問題？

Answer 1

color:沒有default選項，

變化default到inherit（或你想要什麼樣#000000默認顏色名稱），

const color = this.state.hovering ? 'blue' : 'inherit'; 

Example

Example-2