单击时在每一行中打开编辑选项答案

【问题标题】：Edit option is opened in every row when clicked单击时在每一行中打开编辑选项
【发布时间】：2021-06-13 10:35:35
【问题描述】：

我正在开发一个应用程序，我必须在单击图标时显示 Edit Popup。现在它工作正常，但问题是每当我点击它显示在每一行中的行时。我想显示单个弹出窗口，每行不是多个。现在，如果我点击显示 5 次的 5 行弹出窗口，我想在每个单独的行中显示单个弹出窗口

  const editToggle = (index) => {
    if (index === id) {
      setShowModal(true)
    }
  }

 {showModal && (
            <div className="card-container">
              <div className="container_separator card-container-text">Edit</div>
              <div className="container_separator card-container-text">Delete</div>
            </div>
          )}

【问题讨论】：

标签： javascript css reactjs twitter-bootstrap ecmascript-6

【解决方案1】：

将要打开的行的id设置为showModal状态，如果showModal值与id相同则打开modal：

const [showModal, setShowModal] = useState(-1)

const editToggle = (index) => {
  if (index === id) {
    setShowModal(id)
  }
}

{showModal === id && (
  <div className="card-container">
    <div className="container_separator card-container-text">Edit</div>
    <div className="container_separator card-container-text">Delete</div>
  </div>
)}

【讨论】：