Question

我有一个反应数据网格表，显示数值。但在编辑任何单元格时，我们可以输入任何字母数字值。我们可以将输入限制为仅数值吗？

Answer 1

是的，你可以。

您需要做的就是添加自定义编辑器并将其分配给数字列。

在编辑器中，您需要渲染并input并验证用户键入的是数值。您可以通过添加onChange事件处理程序并始终将输入转换为数值来实现。

你的处理程序看起来像这样：

handleChange({ target: { value } }) {
   if (value && Number.isNaN(value)) {
     return;
   }

   // it is a number, so just parse it from the string if you are storing it as a number, otherwise do nothing in here.

   // update the state/dispatch with the new value.
}

自定义编辑器需要实现一系列生命周期方法，核心方法是：

getValue：在单元格提交时调用，返回的内容将覆盖您的行的值，可以一次覆盖一个或多个值，具体取决于您返回的内容，返回值应为像{ [column.key]: value, ... }
getInputNode：打开编辑器时调用它，它用于自动关注特定节点。

您可以查看一些自定义编辑器实现in this open source project.

React Data Grid：我们可以在编辑时将输入限制为仅数字吗？

1 个答案: