代码之家 › 专栏 › 技术社区 › LadyStensberg

React-在MouseOver和onMouseOut事件中未更新内联动态组件样式

reactjs javascript

LadyStensberg · 技术社区 · 6 年前

在我的应用程序中执行以下代码时,按钮的背景为白色,悬停在上面不会改变任何内容。但是,控制台日志确实显示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>

2 回复 | 直到 6 年前

RyanZim nir 6 年前

您正在使用一个功能组件。它对国家一无所知。只有当道具更改时,才会重新渲染组件。React无法知道您的组件需要在 initialState

要解决此问题,需要使用状态为的类:

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>

Hugo Barragon 6 年前

1°onMouseEvents只是在更改一个变量,react不知道它需要使用此变量更新重新加载。

2°如果您使用的是无状态组件,这里有两个选项: 将此组件更改为状态1,或将初始状态更改为来自props,然后对父组件执行设置状态

执行setState更改变量状态/值将强制此组件重新加载,并使用更改的变量更新ui

import React from 'react';

class GetQuoteButton extends React.Component {

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

onMouseOver=()=> {
    this.setState({initialState:true})
}

onMouseOut =()=>{
    this.setState({initialState:false})
}

render() {
    const {initialState}=this.state
    const {color,changeQuote}=this.props

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