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

Posted 2023-03-07

【中文标题】Ant 设计中 Form.Item 的条件渲染

【英文标题】：Conditional rendering of a Form.Item on Ant design

【发布时间】：2020-12-20 02:16:32

【问题描述】：

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

代码类似这样

(...)
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 字段中的道具，但它不起作用

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

【问题讨论】：

我也面临同样的挑战。你用 useState 和条件渲染解决了吗？

【参考方案1】：

这是因为如果无线电输入发生变化，它不会改变 form.item 的值，所以 form.getFieldValue('fieldname') 将不起作用。您可以改用状态并使用以下形式的 onValuesChange 道具：

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

【讨论】：

这是一个很好的方法，谢谢！但是，我收到了一个 initialValue 作为道具，所以我可以使用道具作为初始状态。那是我的问题=(

您可以直接将道具放在状态上，例如使用状态（道具。初始值）；。你也可以在useEffect里面设置值：form.setFieldsValue(fieldname: props.initialValues)。

第一个提案不是反模式吗？我喜欢第二个。我会努力做到的。

【参考方案2】：

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

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review