用ReactJS打开按钮上的div元素

Question

我在渲染函数内使用map函数，在一个按钮上单击想要显示以下div，但我无法做到。早先，onClick是为每一行表内的所有按钮触发的，理想情况下不应该是这样的。

代码:

const [list, setList] = useState(false)
const handleClick = (e) => {
e.preventDefault()
if(e.target.value) {
setList(!list)
}
setList(!list)
}
return (
<TableCell>
<Button className = 'active-select-option'
onClick = {handleClick}>Actions</Button>
{list ?                                                
<div className = "select-option">
<ul id = 'action1' className = "select-option-inner rounded">

<li>Buy More</li>

<li>Sell </li> 

<li>Next Li Tag</li> 
<li>Edit Detials</li>
</ul> 
</div> :  ' ' }
</TableCell> )

Answer 1

跟踪用于显示操作面板的选定行id。

import "./styles.css";
import TableCell from "@mui/material/TableCell";
import { useState } from "react";
import { Button } from "@mui/material";
const data = [
{
id: 1001,
label: "Action1"
},
{
id: 1002,
label: "Action2"
}
];
export default function App() {
const [selectedId, setSelectedId] = useState();
const handleClick = (id) => {
setSelectedId(id !== selectedId ? id : null);
};
return (
<>
{data.map((val) => (
<div>
<TableCell>
<Button
className="active-select-option"
onClick={() => handleClick(val.id)}
>
{val.label}
</Button>
{selectedId === val.id && (
<div className="select-option">
<ul id="action1" className="select-option-inner rounded">
<li>Buy More</li>
<li>Sell </li>
<li>Next Li Tag</li>
<li>Edit Detials</li>
</ul>
</div>
)}
</TableCell>
</div>
))}
</>
);
}

演示:https://codesandbox.io/s/lucid-https-jkp84?file=/src/App.js: 0 - 1114

Answer 2

问题是你没有在handleClick中传递e。一种方法是通过匿名箭头函数传递handleClick，这样你就可以引用它而不是调用它。

<Button className = 'active-select-option'
onClick = {()=>handleClick(e)}>Actions</Button>

Answer 3

我没有看到你的代码有任何问题，但你可以简化一点handleClick方法(没有必要处理e.preventDefault())，也使用&&条件来显示<div>。如果list为true，则返回<div>，否则返回false，不显示<div>。

可以避免在setList(!list)中显式地使用list变量，而是使用setList(l => !l)内部函数提供的前一个状态的值作为参数

如果它不工作，可能是一个css问题?

const [list, setList] = useState(false)
const handleClick = () => {
setList(l => !l);
}
return (
<TableCell>
<Button className = 'active-select-option'
onClick = {handleClick}>Actions</Button>
{list &&                                                
<div className = "select-option">
<ul id = 'action1' className = "select-option-inner rounded">
<li>Buy More</li>
<li>Sell </li> 
<li>Next Li Tag</li> 
<li>Edit Detials</li>
</ul> 
</div>}
</TableCell> )