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/>又能够正常校验

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏