在ReactJS中状态更改后，内嵌样式无法正确呈现

Question

I am trying to apply a simple state change to a button in 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')
);

If you take a look at the demo you will notice that the text color changes to blue when the button is hovered, however when the mouse leaves the button the text color remains blue. The event is fired and the state does change triggering a re-render as evidenced by the text changing.

Why is react not updating the in-line style? What can I do to fix this?

Answer 1

color: does not have default option,

change default to inherit (or default color name what you want like #000000 ),

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

Example

Example-2