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

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

无论如何，这是我的代码（我试图根据

状态

隐藏

业务名称

字段）：

{（字段，{add，remove}）=>{
返回(
{fields.map（field=>(
{[“业务”，“研究”].map（状态=>（{status.label}））}
))}
)}}

---

感谢您的阅读。如有任何帮助，我们将不胜感激。

感谢您澄清您的意图

我设法在下面的CodeSandbox链接中拼凑出一个工作示例：

简而言之，

表单

值可以通过

表单

实例方法

.getFieldValue

访问。由于您使用的是动态表单，因此必须传递给

getFieldValue

的参数是

名称路径[]

。这将检索字段列表中相应字段对象的

状态值

但是，由于组件没有随着
status
的值的更改而正确更新，因此我必须在
Form
组件上使用
onValuesChange
事件处理程序，该处理程序不断更改布尔值，从而触发
useffect
在任何表单字段值更改时更新
Form
组件。

如果你还有任何问题，请告诉我

另外，一种不太老套的方法是通过使用
ishiden
状态变量来隐藏
输入，该变量将被更新，并且确实会导致组件在
onValuesChange
中呈现（ishiden将是一个布尔数组-假表示输入，真表示隐藏输入）…您可以通过
字段键
索引访问相应的布尔值。
您要隐藏哪个字段，以及基于哪个变量？@Lukestry在问题中也进行了澄清-我试图基于
状态
和您的
样式隐藏
业务名称
字段={status=='Business'？{display:'inline'}:{display:'none'}
不起作用？在chrome中打开检查器时，它在检查器中的样式是什么样子的？它总是计算为false。如中所示，检查器显示
display:'none'
（当我将条件翻转到
状态时！==“Business”
它总是显示
display:“inline”
）基本上，我认为它没有获取
status
的值。您的组件代码格式不正确，我几乎可以肯定
status
未按书面形式定义。请修改下面的CodeSandbox链接，以提供组件的最小工作示例，以便我可以提供其他反馈。
<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>