antd EditableProTable在使用valueType和renderFormItem的时候校验无效

user_tYDk6iCh
  • 79

需求:我想让表格中的某一列可以单独编辑,输入数据,并且是实时修改状态

尝试一:使用的是ProTable,直接在columns中需要的编辑的那列里render了一个<InputNumber/>,通过<InputNumber/>的onChange等方法实时更新ProTable的dataSource,如下图所示

        {
            title: "数量",
            dataIndex: "count",
            key: "count",
            render: (text, record) => {
                return <InputNumber/>   
            }
        },

但是这样好像没法做校验,也许我没找到方法,如何能直接根据<InputNumber/> 中输入的数据进行校验并且显示message,还是只能用Form包起来?

尝试二:使用了实时保存的EditableProTable,做了一些修改,复现地址如下

EditableProTable复现链接

这里使用了renderFormItem和formItemProps渲染<InputNumber/>并做校验,但结果发现校验并不起作用,如果去掉renderFormItem,使用默认的输入框,能够正常校验
image.png

综上,请问怎样解决这个校验问题呢?既能够使用<InputNumber/>又能够正常校验

回复
阅读 885
1 个回答
formItemProps: {
    children: <InputNumber />,
    rules: ...
}

我在你的链接上试了是可以的。

宣传栏