在表格中的视图按钮上添加模态

Posted 2023-05-08

【中文标题】在表格中的视图按钮上添加模态

【英文标题】：Adding Modal on View button in Table

【发布时间】：2021-09-24 03:08:59

【问题描述】：

我想在我的桌子上的视图按钮上添加一个模式， 当我单击查看按钮时，我只想将全名和部门视为模态

如何在此表上添加模态并选择特定数据

这是我的源代码

https://codesandbox.io/s/crazy-shadow-xvolj

【问题讨论】：

简单，创建一个模态组件，当点击一个视图按钮时：1.用你想在模态中显示的数据更新一个状态，2.查看模态（切换状态）

【参考方案1】：

创建一个新的状态钩子

const [modelState, setModelState] = useState(
    showModel: false,
    data: null
 )

同时更新点击视图的状态

onClick=() =>
   setModelState( showModel: true, data: row )

并设计你的模型组件，在 JSX 中声明它

 modelState.showModel && (
    <div>Model here console.log(modelState.data)</div>
  )

固定源代码：https://codesandbox.io/s/romantic-edison-bughp

【讨论】：

我把 modelState.data 而不是 console.log(modelState.data) ，所有的内容都不见了

不，您不能直接在 JSX 中打印对象。像 modelState.data.id 或 Iterate modelState.data.cells 一样打印它并打印它。所以你有一个完整的对象，你只需要在模型中以你想要的方式打印它