react-table 仅在单击单元格时在 editable 单元格中显示输入

Question

我正在研究 react-table 库并尝试制作 editable 单元格，只有当我点击一个单元格时，它才会显示用于编辑的输入框。但是，它总是显示输入框。

这是我所做的https://codesandbox.io/s/strange-wildflower-g9cqif?file=/src/App.js

知道我错过了什么吗？

Answer 1

可以参考react-table文档：https://react-table.tanstack.com/docs/examples/editable-data

我们可以更新输入的样式，这样只有在点击时才会知道它是一个输入框，就像文档中所做的那样。

input {
       font-size: 1rem;
       padding: 0;
       margin: 0;
       border: 0;
      }

完整代码：

th,
    td {
      margin: 0;
      padding: 0.5rem;
      border-bottom: 1px solid black;
      border-right: 1px solid black;

      :last-child {
        border-right: 0;
      }
      input {
        font-size: 1rem;
        padding: 0;
        margin: 0;
        border: 0;
      }
    }