我有這個 onClick 函式，它顯示用戶的詳細資訊，然后將另一個狀態設定回 true。因為它是多行的，所以在 return 之外宣告這個函式會更好嗎？如果是這樣我應該怎么寫？
<Button onClick ={() => {setSelectedUser(user); setShowUser(true);}}>{user.name}</Button>
這里我的其余代碼作為參考：
const UserList = () => {
const [users, setUsers] = useState([])
const [selectedUser, setSelectedUser] = useState()
const [showUser, setShowUser] = useState(true)
const onHandleClick = () => setShowUser(false)
useEffect(() => {
fetch(URL)
.then(res => res.json())
.then(json => setUsers(json));
}, [])
return (
<>
<Header>
<h1>Contact list</h1>
</Header>
<Container>
<div>
{users.map(user => (
<div key={user.id}>
<Button onClick ={() => {setSelectedUser(user); setShowUser(true);}}>{user.name}</Button>
</div>
))}
</div>
{selectedUser && (
<>
{showUser ?
<UserDetail
name={selectedUser.name}
username={selectedUser.username}
email={selectedUser.email}
address={selectedUser.address.street}
phone={selectedUser.phone}
company={selectedUser.company.name}
onClick={onHandleClick}
/>
: false}
</>
)}
</Container>
</>
)
}
uj5u.com熱心網友回復：
如果你想在外面宣告函式，JSX那么你可以這樣做：
<Button onClick={() => changeUser(user)}>{user.name}</Button>
功能宣告
function changeUser(user) {
setSelectedUser(user);
setShowUser(true);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/342952.html