Ant 设计上 Form.Item 的条件渲染

Question

我正在尝试使用 Ant design v4.0 制作一个表单。Form.Item（输入文本）的显示取决于其他 Form.Item（单选按钮组）的值。我正在使用form.getFieldValue('fieldname')并且它最初可以工作，但是当我更改单选按钮 Botton 组的值时，该字段仍然显示。

代码与此类似

(...)
const [form] = useForm();
(...)
<Form form={form} (...)>
    <Form.Item name="fieldname" initialValues={props.initialValues}>
        // Here it is a radio button group
    </FormItem>
    { form.getFieldValue('fieldname') === 'a_value' && (
        <Form.Item name="a-text-field> 
              // here it is an input text
        </Form.Item>
    )}
</Form>

正如我之前所说，它适用于初始值，但如果我更改了选项，它就不起作用。我也尝试了 a-text-field 字段中的 prop，但它不起作用

hidden={form.getFieldValue('fieldname') !== 'a_value'}

Answer 1

查看 antd 文档中的这个示例。 https://ant.design/components/form/#components-form-demo-control-hooks 这不需要任何状态变量。'shouldUpdate' 属性重新呈现特定的 form.item。