编写 onClick 多行函数的最佳方法？

Question

我有这个 onClick 函数，它显示用户的详细信息，然后将另一个状态设置回 true。因为它是多行的，所以在返回之外声明这个函数会更好吗？如果是的话我应该怎么写？

 <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>    
    </>
  )
}

Answer 1

如果你想在JSX 之外声明函数，那么你可以这样做：

<Button onClick={() => changeUser(user)}>{user.name}</Button>

函数声明

function changeUser(user) {
  setSelectedUser(user);
  setShowUser(true);
}