有这样一个任务
将鼠标悬停在选定的月份上时,显示本月出生的人员列表。 已经在没有 .bind 的情况下尝试过,但仍然有错误
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import './styles.css';
import classes from './components/Month/month.module.css'
function App() {
// state = {
// users: false
// }
const [users, setUser] = useState(null);
const usersVisible = false;
const fetchData = async () => {
const response = await axios.get(
'https:api/task0/users'
);
setUser(response.data);
};
const groupedUsers = users && users.reduce((acc, n) => {
acc[new Date(n.dob).getMonth()].users.push(n);
return acc;
}, [...Array(12)].map((n, i) => ({
month: new Date(0, i).toLocaleString('ru-RU', { month: 'long' }),
users: []
}))
);
const onHover = () => {
return usersVisible = true;
}
console.log(usersVisible);
return (
<div className="App">
<h1>Users list</h1>
{/* Fetch data from API */}
<div>
<button className="fetch-button" onClick={fetchData}>
download users
</button>
<br />
</div>
{/* Display data from API */}
{}
<div className="users">
{groupedUsers && groupedUsers.map(n => (
<div id="months" key={n.month} className={n.users > 0 ? classes.month.grey : n.users > 2 ?
classes.blue : n.users > 6 ? classes.green : classes.red} onMouseOver={(event) => this.onHover.bind(event)}>
<h2>{n.month}</h2>
{n.users.map(user => (
usersVisible ?
<div key={user.id} >
<div>
<h4 className={classes.userId}>user #{user.id}</h4>
данные пользователя...</div>
</div> : null
))}
</div>
))}
</div>
</div>
);
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
这是错误代码
TypeError: Cannot read property 'onHover' of undefined
onMouseOver
C:/Users/Константин/Desktop/react/new-app/src/index.js:60
57 | <div className="users">
58 | {groupedUsers && groupedUsers.map(n => (
59 | <div id="months" key={n.month} className={n.users > 0 ? classes.month.grey : n.users > 2 ?
> 60 | classes.blue : n.users > 6 ? classes.green : classes.red} onMouseOver={(event) => this.onHover.bind(event)}>
| ^ 61 | <h2>{n.month}</h2>
62 | {n.users.map(user => (
63 | usersVisible ?
函数 onHover 改变了变量的值,这应该会导致 jsx 中 block 的输出。问题隐藏在哪里?非常感谢!!
最佳答案
错误来源:当您处理函数组件时,this
关键字不是对组件的引用,而是对窗口的引用。因此,为了访问您的 onHover
,您只需直接调用它,而不是使用 this
或 bind
。
此外,虽然此显示/隐藏与组件将具有的状态相关,但 usersVisible
应由状态处理。
function App() {
const [users, setUser] = useState(null);
const [usersVisible, setVisibility] = useState(false);
const fetchData = async () => {
const response = await axios.get(
'https://yalantis-react-school.herokuapp.com/api/task0/users'
);
setUser(response.data);
};
const groupedUsers = users && users.reduce((acc, n) => {
acc[new Date(n.dob).getMonth()].users.push(n);
return acc;
}, [...Array(12)].map((n, i) => ({
month: new Date(0, i).toLocaleString('ru-RU', { month: 'long' }),
users: []
})));
return (
<div className="App">
<h1>Users list</h1>
{/* Fetch data from API */}
<div>
<button className="fetch-button" onClick={fetchData}>
download users
</button>
<br />
</div>
{/* Display data from API */}
{}
<div className="users">
{groupedUsers && groupedUsers.map(n => (
<div id="months" key={n.month} className={n.users > 0 ? classes.month.grey : n.users > 2 ?
classes.blue : n.users > 6 ? classes.green : classes.red}
onMouseLeave={() => setVisibility(false)}
onMouseOver={() => setVisibility(true)}>
<h2>{n.month}</h2>
{n.users.map(user => (
usersVisible ?
<div key={user.id} >
<div>
<h4 className={classes.userId}>user #{user.id}</h4>
данные пользователя...</div>
</div> : null
))}
</div>
))}
</div>
</div>
);
}
最后,我注意到您正在为组件获取数据,因此请考虑使用 useEffect
hook ,因为这是函数组件中推荐的数据获取方法
关于javascript - 为什么 onMouseOver 不能正常工作 Reactjs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59670133/