反应：onMouseEnter / onMouseLeave 不使用状态答案

【问题标题】：React : onMouseEnter / onMouseLeave not working with state反应：onMouseEnter / onMouseLeave 不使用状态
【发布时间】：2021-06-20 05:26:00
【问题描述】：

做一个简单的井字游戏。我试图在鼠标输入时突出显示单个单元格，而不是在鼠标离开时恢复正常 - 使用状态和内联样式来实现这一点。鼠标输入时状态变化良好（样式也是如此），但鼠标离开时它永远不会恢复正常。我在这里错过了什么？

import React, { useState } from 'react';

function Cell(props) {

    let defaultStyle = {backgroundColor: 'none'}
    let selectedStyle = {backgroundColor: 'blue'}


    const [style, setStyle] = useState(defaultStyle)

    const sendData = () =>{
        props.clicker(props.cords)
    }

    const set = () =>{
        setStyle(selectedStyle);

    }

    const unset = () =>{
        setStyle(defaultStyle);
    }

    return (
        <td onClick = {sendData} onMouseEnter= {set} onMouseLeave = {unset} style ={style}>{props.content}</td>
    )
}

export default Cell

【问题讨论】：

background-color: none 不是 CSS 标准的一部分
另外，如果可能的话，使用 CSS 而不是 JS 来模拟 :hover 伪选择器。
这能回答你的问题吗？ Is background-color:none valid CSS?

标签： javascript reactjs

【解决方案1】：

将 backgroundColor: 'none' 与 backgroundColor: 'transparent' 切换

function Cell(props) {

    let defaultStyle = {backgroundColor: 'transparent'}
    let selectedStyle = {backgroundColor: 'blue'}


    const [style, setStyle] = React.useState(defaultStyle)

    const sendData = () =>{
        props.clicker(props.cords)
    }

    const set = () =>{
        setStyle(selectedStyle);

    }

    const unset = () =>{
        setStyle(defaultStyle);
    }

    return (
        <td onClick={sendData} onMouseEnter={set} onMouseLeave={unset} style={style}>{props.content}</td>
    )
}

ReactDOM.render(<Cell clicker={() => {}} cords={() => {}} content='my content' />, document.querySelector('#root'))

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

【讨论】：

成功了！给人的印象是“没有”是一回事。谢谢！

【解决方案2】：

none 不是一个有效的background-color，所以 React 会跳过它并继续使用之前的 blue 样式。使用其他东西，比如空字符串：

function Cell(props) {

    let defaultStyle = {backgroundColor: ''}
    let selectedStyle = {backgroundColor: 'blue'}


    const [style, setStyle] = React.useState(defaultStyle)

    const sendData = () =>{
        props.clicker(props.cords)
    }

    const set = () =>{
        setStyle(selectedStyle);

    }

    const unset = () =>{
        setStyle(defaultStyle);
    }

    return (
        <div onClick = {sendData} onMouseEnter= {set} onMouseLeave = {unset} style ={style}>{props.content}</div>
    )
}

ReactDOM.render(<Cell content='foobar' />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

【讨论】：

【解决方案3】：

首先，不要在'='和括号之间放空格，这里是更正的行：

<td onClick={sendData} onMouseEnter={set} onMouseLeave={unset} style={style}>{props.content}</td>

其次，将{backgroundColor: 'none'}改为{backgroundColor: 'transparent'}

希望您的代码可以正常工作:)

【讨论】：