reactjs - 如何在 ReactJS 中隐藏或显示字段（使用 antd 组件）？

问题描述

我希望根据 antd 表单中另一个的选定值来隐藏一个输入字段。我指的是这个问题（看看有些人是如何赞成（并接受）这个答案的。但是，它对我不起作用。也许是因为我在动态表单设置中使用它？

无论如何，这是我的代码（我试图business_name在的基础上隐藏该字段status）：

<Form initialValues={{relative: [{"status": "Business", "business_name": "ABC inc"}, {"status": "Studying"}]}}>
    <Form.List name="relative">
        {(fields, {add, remove}) => {
            return (
                <div>
                    {fields.map(field => (
                        <div>
                            <Form.Item
                                {...field}
                                name={[field.name, 'status']}
                                fieldKey={[field.fieldKey, 'status']}>
                                <Select>{["Business", "Studying"].map(status => (<Option value={status.value}>{status.label}</Option>))}</Select>
                            </Form.Item>

                            <Form.Item
                                {...field}
                                style={status === 'Business' ? {display: 'inline'} : {display: 'none'}}
                                name={[field.name, 'business_name']}
                                fieldKey={[field.fieldKey, 'business_name']}>
                                <Input placeholder="Business Name"/>
                            </Form.Item>
                        </div>))}
                </div>)}}
    </Form.List>
</Form>

感谢您的阅读。任何帮助将不胜感激。

标签： reactjsantd

感谢您澄清您的意图。

我设法在下面的 CodeSandbox 链接中编写了一个工作示例：

https://codesandbox.io/s/antdhidingfieldonadynamicform-nro1g?file=/index.js

简而言之，Form可以通过form实例方法访问这些值.getFieldValue。由于您使用的是动态表单，因此您必须传递给的参数getFieldValue是NamePath[]. 这将检索status字段列表中适当字段对象的值。

但是，由于组件没有随着值的status变化而正确更新，所以我不得不onValuesChange在组件上使用事件处理程序，该事件处理程序Form不断更改布尔值触发器以在任何表单字段值更改useEffect时更新组件。Form

如果您还有其他问题，请告诉我。

PS 一个不那么老套的方法是Input通过使用一个isHidden状态变量来隐藏它，该变量将被更新并确实导致组件在其中呈现onValuesChange（isHidden 将是一个布尔数组 - 显示输入为假，隐藏输入为真）......您将通过fieldKey索引访问适当的布尔值。

reactjs - 如何在 ReactJS 中隐藏或显示字段（使用 antd 组件）？

问题描述

解决方案

推荐阅读