反应：onMouseEnter/onMouseLeave无法处理状态

Question

做一个简单的井字游戏。我尝试在鼠标进入时突出显示单个单元格，然后在鼠标离开时恢复正常-使用状态和内联样式来完成这一点。状态在鼠标进入时变化很好（样式也是如此），但在鼠标离开时不会恢复正常。我在这里错过了什么？

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

Answer 1

首先，不要在“=”和括号之间放一个空格，这是更正后的行：

其次，将< code > { background color:' none ' } 更改为< code > { background color:' transparent ' }

希望您的代码能够正常工作：）

Answer 2

无不是有效的backder-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'));

html lang-html prettyprint-override"><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>

Answer 3

切换backgroundColor:“none”，background颜色：“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>