React

首页 / 知识 / React

先来看下官方的FAQ：

https://procomponents.ant.design/components/table?tab=api¤t=1&pageSize=5#%E4%B8%BA%E4%BB%80%E4%B9%88%E4%B8%8D%E8%83%BD%E8%87%AA%E5%B7%B1%E8%AE%BE%E7%BD%AE-value-%E5%92%8C-onchange


一般需要自定义表单是因为官方提供的valueType不能够满足，例如想要搜索数字的范围

首先你会发现，如果给form赋值，是没有效果的，在request不会出现from的字段，能出现在request中，只有columns中定义的且hideInSearch是false的。

<InputNumber onChange={(v)=>{ form.setFieldValue('from',v) }} />


一种方式是通过自定义useState来存储表单值，然后在request中取出来

这种方式可行，只是每一个表单值需要一个useState，比较繁琐


那可不可以将表单值统一存储在一个useState中?

答案是不行，如下示例

const [exQueryArgs,setExQueryArgs] = useState<any>({});
// 在columns中定义
<InputNumber onChange={(v)=>{ setExQueryArgs(...exQueryArgs, from: v); }} />
<InputNumber onChange={(v)=>{ setExQueryArgs(...exQueryArgs, to: v); }} />

问题出在exQueryArgs，ProTable对columns应该是深复制，导致其exQueryArgs永远是最初赋值时的值，这里永远是{}，导致要么from有值，要么to有值。


下面是最佳实践：

既然protable内嵌了proform，那么我们回想一下ant.design 关于form的一些使用方法，例如登录框是这样写的

<Form.Item>
  <Flex justify="space-between" align="center">
    <Form.Item name="remember" valuePropName="checked" noStyle>
      <Checkbox>Remember me</Checkbox>
    </Form.Item>
    <a href="">Forgot password</a>
  </Flex>
</Form.Item>

Form.Item 可以有下级 Form.Item

那是不是表明，要想增加表单中没有的项，可以增加Form.Item，如下就是最佳实践

renderFormItem: (item, { defaultRender, ...rest }, form) => {
  return <>
    <Space>
      <Form.Item name="noPayFeeFrom" ><InputNumber /></Form.Item>
      -
      <Form.Item name="noPayFeeTo"><InputNumber /></Form.Item>
    </Space>
  </>
}

最后，如果需要给表单中赋初始值，不能指望从useState取到值，而是需要你这样子做

<ProTable
    form={{
      initialValues: {noPayFeeTo: undefined}
    }}
>