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

切换 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>

Answer 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>

Answer 3

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

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

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

希望你的代码可以工作:)

反应：onMouseEnter / onMouseLeave 不适用于状态

3 个答案: