javascript - 在 React 中使用 UseState 处理事件

Question

我创建了 3 个组件：App、UserList 和 UserInfo。当我单击按钮（获取用户）时，我会收到一个用户列表，当我单击列表中的每个用户时，如何获取用户信息？

我阅读了有关事件处理的信息，但我不知道如何在此示例中应用它。

应用程序.js

import React, { useState } from 'react';
import './App.css';
import UserList from './components/UserList'
import UserInfo from './components/UserInfo'

function App() {
  const [users, setUsers] = useState([])


 async function getUsers(){
    try{
      const response = await fetch(`https://randomuser.me/api/?results=5`)
      if(!response.ok){
        throw Error('something went wrong during fetch API')
      }

      const data = await response.json()
      setUsers(data.results)
      console.log(data)

    } catch (error){
      console.log(error)

    }
  }


  return (
    <div className="App">

     <button onClick={()=> getUsers()}>Get Users</button>
     <UserList users={users}/>
    </div>
  );
}

export default App;

用户列表.js

import React from 'react';
import uuid from 'uuid'

const UserList = ({users, onClickUser}) => {
    return (
        <div>
            <ul>
                {
                    users.map(user =>{
                        return(
                    <li key={uuid()} onClick={() => onClickUser(user) }>{user.name.first}</li>
                    ) 
                })}
            </ul>
        </div>
    );
};

export default UserList;

用户信息.js

import React from "react";

const UserInfo = ({ information }) => {
  return (
    <div>
      <div>
        {information.name.first} {information.name.last}
      </div>
      <div>{information.email}</div>
      <div>{information.gender}</div>
    </div>
  );
};

export default UserInfo;

标签： javascriptreactjs

Answer 1

你已经非常接近让这个工作......只是你没有onClickUser在你的组件中使用道具App（也就是你没有将它传递下去）..这是一个如何完成你所追求的示例：

const { useState } = React;
const { render } = ReactDOM;

const UserList = ({ users, onClickUser }) => {
  return (
    <div>
      <ul>
        {users.map(user => {
          return (
            <li key={uuid()} onClick={() => onClickUser(user)} style={{cursor: 'pointer'}}>
              {user.name.first}
            </li>
          );
        })}
      </ul>
    </div>
  );
};

const UserInfo = ({ information }) => {
  return (
    <div>
      <div>
        {information.name.first} {information.name.last}
      </div>
      <div>{information.email}</div>
      <div>{information.gender}</div>
    </div>
  );
};

function App() {
  const [users, setUsers] = useState([]);
  const [clickedUser, setClickedUser] = useState("");

  async function getUsers() {
    try {
      const response = await fetch(`https://randomuser.me/api/?results=5`);
      if (!response.ok) {
        throw Error("something went wrong during fetch API");
      }

      const data = await response.json();
      setUsers(data.results);
      console.log(data);
    } catch (error) {
      console.log(error);
    }
  }

  const handleUserClick = user => {
    console.log(user);
    setClickedUser(user);
  };

  return (
    <div className="App">
      <button onClick={() => getUsers()}>Get Users</button>
      {users.length ? <p style={{marginBottom: '0px'}}>Click on a user to see user info</p> : ""}
      {/* THIS IS WHAT YOU HAD BEFORE: */}
      {/* <UserList users={users} /> */}
      <UserList users={users} onClickUser={handleUserClick} />
      {clickedUser ? <pre>{JSON.stringify(clickedUser, null, 2)}</pre> : ""}
    </div>
  );
}

function uuid() { // only here so this doesn't bomb out
  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
    var r = (Math.random() * 16) | 0,
      v = c == "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}

render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>