Antd表格展开行并在里面放置textarea答案

【问题标题】：Antd table expand row and place textarea insideAntd表格展开行并在里面放置textarea
【发布时间】：2018-04-02 14:06:49
【问题描述】：

我正在尝试使用 Antd 实现行编辑，当我单击“编辑”链接时，行会展开并且用户可以在其中输入文本区域。我无法弄清楚如何触发行扩展（在 + 号上没有看到任何 onclick 事件处理程序），也无法弄清楚如何访问扩展的行元素以非 hacky 的方式在其中滑动表单字段.

这是当前代码 - https://gist.github.com/llevar/8f9a68bcc15ab0e37defb14a5126c5ad。目标是在单击“编辑”时将包含 JSON 的“配置”列最终显示在文本区域中。

提前致谢。

【问题讨论】：

【解决方案1】：

你试过了吗 onExpandedRowsChange props 和 onExpand 它们使您可以访问扩展行回调和扩展行更改。

编辑：我没有尝试过，但我认为您应该能够以编程方式使用expandedRowKeys 和状态扩展行。并使用expandedRowRender 有条件地渲染“查看模式”和“编辑模式（文本区域）”，您也可以添加一个保存按钮来保存文本区域的值并将其转回“查看模式”

onExpand 会在您按下 + 图标（或通过 rowClick 展开行）时触发

【讨论】：

感谢您的回复。这很有帮助，但我不确定我是否完全理解您的意思（在中断了 10 年之后重新回到 JS 世界）。我假设您建议使用 onExpand() 事件我将获得对该行的引用以在其中放置一个表单字段，并使用 onExpandedRowsChange() 我可以保存用户的输入。这是正确的吗？我仍然不清楚如何使用编辑链接触发展开。提前感谢您的帮助。
我添加了一些信息，我不确定我是否 100% 理解您想要实现的目标。
好吧，我已经深入研究了一些，但效果并不好。将行索引推入expandedRowKeys 会扩展行，但不会将行图标 [+] 更新为 [-]。我看到它工作的唯一方法是使用像expandRowByClick 和expandAll 这样的内置方法。 onExpand 不会导致展开，而是在展开发生时触发的事件。将行索引推入expandedRowKeys 不会触发onExpand。到目前为止，我无法让它工作。另外，您建议如何实现编辑和查看模式？我认为这应该是 Row 状态，但我如何访问该行？
澄清一下，我终于可以让它工作了。问题是expandRowKeys 使用rowKeys (duh) 而不是行索引。我被 Antd 示例中行索引的使用所迷惑，但事实证明他们的示例也不能真正使用索引。