antd-Form——getValueFromEvent和shouldUpdate

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

当检测表单值发生改变，想做一些操作时，发现有两个属性有同样的作用（但每个属性都不仅限于这个作用）

getValueFromEvent：

这个方法本来的作用，是为当前表单域赋值，当前表单值发生变化时触发,出发getValueFromEvent的回调函数，回调返回e，可以通过e拿到表单更新的数据，通过返回的值，再次为表单赋值。

注意不管是为了实现表单赋值，还是实现联动，都必须给getValueFromEvent回调函数返回值，没有返回值，返回空，将会将表单置空

但是在这里我们可以通过他表单值发生改变执行回调的特性，设置一个状态值，去记录当前表单的状态或者选中值，然后在外面通过判断这个记录值，去实现联动.

需要注意的是，初始值initialValues，并不会使getValueFromEvent执行

const [allowPrepay,setAllowPrepay] = useState('');

<ProFormRadio.Group
   name="isAllowPrepay"
   rules={[{ required: true, message: '请选择是否允许提还' }]}
   getValueFromEvent={(e) => {
        const { target } = e;
        { value } = target;
   	setAllowPrepay(value);
   	return value;
    }}
    options={[
 	{ label: '是', value: true },
	{ label: '否', value: false },
    ]}
/>
{allowPrepay && <Form.Item
    name="prepayPrice"
    label="提前还款手续费"
    rules={[{ required: true, message: '必填' }]}
 >
     <Input />
</Form.Item>}

shouldUpdate:

判断当表单数据前后不一致的话，然后通过包裹，可以拿到该表单最新的值，进行判断展示某个表单，实现联动.

<Form.Item
    label="性别"
    name="sex"
    rules={[{ required: true, message: '必选' }]}
   >
        <Radio>
            <Option value="men">男</Option>
            <Option value="women">女</Option>
        </Radio>
</Form.Item>
<Form.Item
    noStyle
    shouldUpdate={(prevValues, currentValues) =>
	.sex!== currentValues.sex
    }
>
    {({ getFieldValue }) =>
        getFieldValue('sex') === "women"? (
            <Form.Item
                name="age"
                label="年龄"
                rules={[{ required: true, message: '必填' }]}
            >
                    <Input />
            </Form.Item>
        ) : null
    }
</Form.Item>