reactjs - React Data Grid：我们可以在仅以数字形式编辑时限制输入吗？

Question

我有一个显示数值的 react-data-grid 表。但是在编辑任何单元格时，我们可以输入任何字母数值。我们可以将条目限制为仅限数值吗？

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：打开编辑器时调用，用于自动聚焦特定节点。

您可以在这个开源项目中检查一些自定义编辑器实现。