為什么工具提示沒有隱藏在反應中的 mouseleave 事件上？

Question

我試圖在mouse enter時顯示工具提示並在mouse leave隱藏。首先我制作了一個運行良好的簡單演示。 https://codesandbox.io/s/exciting-shannon-4zuij?file=/src/list.js

上面的代碼在懸停時工作正常，它顯示工具提示並在休假時隱藏。

看到我在應用程序上應用的相同概念。（此代碼不起作用） https://codesandbox.io/s/cool-liskov-8rvjw?file=/src/App.js

當我懸停一個項目時會顯示工具提示。但是當你離開這個項目時它沒有隱藏工具提示。出了點問題。

const Student = ({students,clickHandler}) => {
    console.log(students,"---ee")
    const [selectedStudent,setSelectedStudent]  = useState(null)

    const onMouseHandler = (student,e)=>{
        student.visibility = true
        setSelectedStudent(student)
    }

    const onMouseLeaveHandler = (student)=>{
        console.log('======',student)
        student.visibility = false
        setSelectedStudent(student)
    }
    return (
        <ul className="student-container">
            {
                students && students.length > 0 ? students.map((student,index)=>{
                    return (
                        <li key={index} onClick={()=>{
                            clickHandler(student)
                        }}
                            onMouseLeave={()=>{
                                onMouseLeaveHandler(student)
                            }}
                            onMouseEnter={(e)=>{
                            onMouseHandler(student,e)
                        }} style={{position:'relative'}}>
                        <a><span>{student.name}</span></a>
                            {student.visibility? <ToolTip showToolTip={student.visibility} selectedStudent={selectedStudent}/>:null}
                        </li>
                    )
                }):null
            }
        </ul>
    );
};

export default Student;

步太重現

1. 將鼠標懸停在第一項Raj
2. 然后嘗試懸停sameer 。無論提示將display.I只需要一個工具提示將其懸停顯示。

I want my handlers should be in my functional component . I don't want to move these handler to parent component and pass handler as a props

Answer 1

在您的演示中，它也不能很好地工作，-只有在打開另一個時才能隱藏。 當您設置student.visibility您沒有設置狀態，因此沒有重新渲染。

然后，當您調用setSelectedStudent您傳遞的引用與以前相同，因為它是同一個對象，因此狀態沒有改變，並且再次 - 沒有任何內容被重新渲染。

您需要做的是將更新后的學生傳遞到一個新變量中。 像這樣：

setSelectedStudent({...student})

那么一切都應該工作