javascript - React - 内联动态组件样式未在 onMouseOver 和 onMouseOut 事件上更新

Question

当下面的代码在我的应用程序中执行时，按钮有一个白色的背景并且悬停在它上面没有任何改变。但是，控制台日志确实显示 onMouseOver 和 onMouseOut 事件正在触发并将 initialState 的值从 false 更改为 true 并再次更改。

const GetQuoteButton = (props) => {

	let initialState = false;

	function onMouseOver() {
		return initialState = true;
	}

	function onMouseOut() {
		return initialState = false;
	}

	return (
		<button
			onMouseOver={onMouseOver}
			onMouseOut={onMouseOut}
			style={{ backgroundColor: initialState ? props.color : 'white' }}
			onClick={props.changeQuote}
			className="GetQuoteButton">
			Change Quote
		</button>
	)

}

ReactDOM.render(<GetQuoteButton color="red" />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 1

您正在使用功能组件。它对状态一无所知。您的组件仅在 props 更改时才重新渲染。当 initialState 更改时，React 无法知道您的组件需要重新渲染。

要解决这个问题，你需要使用一个带有状态的类:

class GetQuoteButton extends React.Component {
      constructor(props) {
        super(props);
        this.state = { hover: false };
      }
    
      onMouseOver() {
        this.setState({ hover: true });
      }
    
      onMouseOut() {
        this.setState({ hover: false });
      }
    
      render() {
        return (
          <button
            onMouseOver={() => this.onMouseOver()}
            onMouseOut={() => this.onMouseOut()}
            style={{ backgroundColor: this.state.hover ? this.props.color : "white" }}
            onClick={this.props.changeQuote}
            className="GetQuoteButton"
          >
            Change Quote
          </button>
        );
      }
    }

ReactDOM.render(<GetQuoteButton color="red" />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>