我有一個反應應用程式，我應該在其中從 API 端點獲取用戶：<reqres.in>。
我應該在主頁上回傳與從 API 獲取用戶時獲得的用戶數量一樣多的按鈕。
此外，我被限制不向所有按鈕添加事件偵聽器，而只向按鈕的包裝器添加一個偵聽器。相同的代碼是：
const ButtonContainer = ({ users }) => {
// const navigate=useNavigate();
const wrapper = document.getElementById('wrapper');
wrapper.addEventListener('click', (event) => {
const isButton = event.target.nodeName === 'BUTTON';
if (!isButton) {
return;
}
// navigate(`/singleuser/${event.target.id}`);
})
return (
<div id='wrapper'>
{
users.map((user, idx) => {
return (
<button key={idx} id={idx}>
User {idx}
</button>
)
})
}
</div>
)
}
export default ButtonContainer
users 是我從 API 獲得的用戶陣列。
但是我收到錯誤：
Cannot read properties of null (reading 'addEventListener')
我應該怎么辦？
uj5u.com熱心網友回復：
在 React 中使用原生 DOM 方法不會給你想要的結果，因為 React 有自己的 DOM 管理方式。
添加一個onClick到你的包裝元素：
<div onClick={handleClick}>
然后handleClick處理事件。
function Example({ users }) {
function handleClick(e) {
// Because we're using event delegation [1]
// check if the clicked element was a user button
if (e.target.matches('button.user')) {
// Extract the id from its dataset,
// and log it
const { id } = e.target.dataset;
console.log(`User: ${id}`);
}
}
return (
<div onClick={handleClick}>
{users.map(user => {
return (
<button
key={user.id}
className="user"
data-id={user.id}
>User: {user.id}
</button>
);
})}
</div>
);
}
const users = [{ id: 1 }, { id: 2 }, { id: 3 }];
ReactDOM.render(
<Example users={users} />,
document.getElementById('react')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/489207.html