单击项目时如何更改 ReactJS 中的列表项？

在 ReactJS 中，单击列表中的某个项目时更改列表中的项目可以通过在当前单击的项目上触发 onClick() 事件来完成。因为，为了反映变化，我们还必须在 react 中维护状态，以便在变化之后再次呈现页面时，变化会得到反映。

为了实现单击时项目的更改，我们将使用 useState 挂钩将列表数据创建为 react 中的状态。然后在 onClick 上我们将更改项目。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app example

第 2 步：创建项目文件夹（即示例）后，使用以下命令移动到该文件夹：

cd example

第 3 步：在 react 项目目录的 src 文件夹中创建文件夹 components，并在 components 文件夹中创建文件 List.jsx。

项目结构：它看起来像这样。

项目结构

实现：在 index.js、App.js 和 List.jsx 文件中写下以下代码。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
  
ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);
  
// If you want to start measuring performance
// in your app, pass a function to log results
reportWebVitals();

应用程序.js

import React, { useState } from 'react';
  
import List from './components/List';
  
function App() {
  const [users, setUsers] = useState([
    {
      name: 'Deepak',
      rollNo: '123',
    },
    {
      name: 'Yash',
      rollNo: '124',
    },
    {
      name: 'Raj',
      rollNo: '125',
    },
    {
      name: 'Rohan',
      rollNo: '126',
    },
    {
      name: 'Puneet',
      rollNo: '127',
    },
    {
      name: 'Vivek',
      rollNo: '128',
    },
    {
      name: 'Aman',
      rollNo: '129',
    },
  ]);
  
  const handlechange = (index) => {
    const newUsers = [...users];
    newUsers[index].name = 'New Name';
    newUsers[index].rollNo = 'New RollNo';
    setUsers(newUsers);
  };
  
  return (
    

      
Rendering List of components with array of data
  
      {users.map((Users, index) => {
        return (
          
 {
              handlechange(index);
            }}
            key={index}>
            
          
        );
      })}
    
  );
}
  
export default App;

列表.jsx

import React from 'react';
  
const List = (props) => {
  return (
    

      
Name of student {props.name}
      
Roll number of student {props.rollNo}
    
  );
};
  
export default List;

运行应用程序的步骤：使用以下命令运行应用程序：

npm start

输出：我们在 App.js 文件中获取了一组学生数据，然后我们创建了一个组件 List.jsx，其中传递了数组数据，并在映射函数的帮助下，我们将 List 组件映射到了一个数据数组。然后，当我们单击任何列表时，它的名称和卷号都会更新。

输出