编写 onClick 多行函数的最佳方式?
Best way to write onClick multiline function?
我有这个 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>
</>
)
}
如果你想在 JSX
之外声明函数,那么你可以这样做:
<Button onClick={() => changeUser(user)}>{user.name}</Button>
函数声明
function changeUser(user) {
setSelectedUser(user);
setShowUser(true);
}
我有这个 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>
</>
)
}
如果你想在 JSX
之外声明函数,那么你可以这样做:
<Button onClick={() => changeUser(user)}>{user.name}</Button>
函数声明
function changeUser(user) {
setSelectedUser(user);
setShowUser(true);
}