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选项，

将inherit更改为#000000（或您想要的默认颜色名称const color = this.state.hovering ? 'blue' : 'inherit';），

SqlCommand com = new SqlCommand(
                        "UPDATE Users " +
                        "SET Password = '" + txtConfirmPassword.Text + "' " +
                        "WHERE Username = " + Session["Username"] + " ", conn);

Example

Example-2

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

1 个答案: