antd - 基于 Ant 设计的 Form.Item 的条件渲染

Question

我正在尝试使用 Ant design v4.0 制作表单。 Form.Item(输入文本)的显示取决于其他 Form.Item(单选按钮组)的值。我正在使用 form.getFieldValue('fieldname')它最初有效，但是，当我更改 radio 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

这是因为如果单选输入改变了，它不会改变 form.item 的值，所以这样做 form.getFieldValue('fieldname')不管用。您可以改用状态并使用表单的 onValuesChange Prop :

const [radioValue, setRadioValue] = useState("a_value");
const [form] = useForm();
(...)

const handleFormValuesChange = (changedValues) => {
    const fieldName = Object.keys(changedValues)[0];

    if(fieldName === "a-text-field"){
        const value = changedValues[fieldName];
        setRadioValue(value)
    } 
}

<Form form={form} onValuesChange={handleFormValuesChange}>
    <Form.Item name="fieldname" initialValues={radioValue}>
        // Here it is a radio button group
    </FormItem>
    { radioValue === 'a_value' && (
        <Form.Item name="a-text-field'> 
              // here it is an input text
        </Form.Item>
    )}
</Form>

这是 link工作样本