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

【问题标题】：How can I hide or show a field in ReactJS (using antd components)?如何在 ReactJS 中隐藏或显示字段（使用 antd 组件）？
【发布时间】：2020-07-15 11:07:51
【问题描述】：

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

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

<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>

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

【问题讨论】：

要隐藏哪个字段，基于哪个变量？
@LukeStorry 在问题中也得到了澄清 - 我试图在 status 的基础上隐藏 business_name 字段
而您的 style={status === 'Business' ? {display: 'inline'} : {display: 'none'}} 代码不起作用？在 chrome 中打开 Inspector 时的样式是什么样的？
它总是评估为假。如，检查员显示display: 'none'（当我将条件翻转为status !== 'Business'时，它总是显示display: 'inline'）基本上，我认为它没有获取status的值。
您的组件代码格式错误，我几乎可以肯定status 未定义为书面形式。请修改下面的 CodeSandbox 链接以提供您的组件的最小工作示例，以便我可以提供额外的反馈。 codesandbox.io/s/malformed-dynamic-form-component-blfr2

标签： reactjs antd

【解决方案1】：

感谢您阐明您的意图。

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

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

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

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

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

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

【讨论】：