英文:
Show specific item when button clicked from list of items in React
问题
我有一个对象列表。组件遍历列表并为每个项目返回一个按钮。当点击按钮时，我想显示特定项目。使用下面的代码，当点击按钮时，所有项目都会显示出来。如何实现这个功能？
import './App.css';
import { useState } from "react";
const list_of_items = [{id:1, text:"lorem ipsum 1"}, {id:2, text:"lorem ipsum 2"}, {id:3, text: "lorem ipsum 3"}]
function App() {
const [seeItem, setSeeItem] = useState(false);
function clickHandler(e) {
console.log("Button clicked ...", e);
setSeeItem(prevState => !prevState);
}
return (
<>
<h1>我要测试单击列表项</h1>
{list_of_items.map((item, index) => {
return (
<div key={index} style={{ margin: 70 }} onClick={clickHandler}>
{ seeItem && JSON.stringify(item)}
<button style={{display:"block"}}>点击了哪个项目？</button>
</div>
);
})}
</>
);
}
export default App;
希望这对你有所帮助。
英文:
i have list of objects. Component iterate through list and returns a button for every item. I want to show a specific item when button clicked. With below code when click a button all items will be shown. How to do that?
import './App.css';
import { useState } from "react";
const list_of_items = [{id:1, text:"lorem ipsum 1"}, {id:2, text:"lorem ipsum 2"}, {id:3, text: "lorem ipsum 3"}]
function App() {
const [seeItem, setSeeItem] = useState(false);
function clickHandler(e) {
console.log("Button clicked ...", e);
setSeeItem(prevState => !prevState);
}
return (
<>
<h1>Im going to test clicks to list of items</h1>
{list_of_items.map((item, index) => {
return (
<div key={index} style={{ margin: 70 }} onClick={clickHandler}>
{ seeItem && JSON.stringify(item)}
<button style={{display:"block"}}>Which item clicked?</button>
</div>
);
})}
</>
);
}
export default App;
答案1
得分: 1
以下是已翻译的内容：
如评论中所提到的，您需要一种列表来跟踪正在显示的项目。
创建状态：
const [seeItems, setSeeItems] = useState([]);
创建切换处理程序：
const toggleSeeItem = (index) => {
setSeeItems((prevState) => {
// 检查索引是否已经在数组中
// 如果是，则从列表中删除它
if (prevState.includes(index))
return prevState.filter((item) => item !== index);
// 否则将以前的数组与新的索引一起返回
return [...prevState, index];
});
};
将toggleSeeItem添加到onClick，并提供index。您可以使用includes来检查当前项目是否应该显示。
{
list_of_items.map((item, index) => {
return (
<div
key={index}
style={{ margin: 70 }}
onClick={() => toggleSeeItem(index)}
>
{seeItems.includes(index) && JSON.stringify(item)}
<button style={{ display: "block" }}>Which item clicked?</button>
</div>
);
});
}
英文:
As mentioned in the comments you will need some kind of list to keep track of the items that are showing.
Create the state
const [seeItems, setSeeItems] = useState([]);
Create a toggle handler
const toggleSeeItem = (index) => {
setSeeItems((prevState) => {
// check if the index is already in the array
// if so remove it from the list
if (prevState.includes(index))
return prevState.filter((item) => item !== index);
// else the previous array with the new index
return [...prevState, index];
});
};
Add the toggleSeeItem to the onClick and provide the index. You can use includes to check if the current item should be shown.
{
list_of_items.map((item, index) => {
return (
<div
key={index}
style={{ margin: 70 }}
onClick={() => toggleSeeItem(index)}
>
{seeItems.includes(index) && JSON.stringify(item)}
<button style={{ display: "block" }}>Which item clicked?</button>
</div>
);
});
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论