代码之家 › 专栏 › 技术社区 › elsni

如何根据react admin中布尔输入字段的状态动态显示或隐藏表单字段?

react-admin reactjs javascript

elsni · 技术社区 · 5 年前

我需要建立一个复杂的编辑形式与反应管理。表单中有各种各样的yes/no滑块,这些滑块由react admin的BooleanInput组件生成。如果用户将slider设置为“yes”,则应动态显示更多表单字段,这些字段按主题指向slider。如何查询BooleanInput组件的状态,或者是否以不同的方式在react中解决此任务?

<BooleanInput source="yesno" label="show or hide fields" />
<AutocompleteArrayInput source="probably_hidden1" label="show or hide me" choices={[
        { id: 'one', name: '1' },
        { id: 'two', name: '2' },
        { id: 'three', name: '3' }
]} />
<TextInput multiline source="text" label="show or hide me too" />

0 回复 | 直到 5 年前

elsni 5 年前

我发现:可以使用FormDataConsumer这样做:

<BooleanInput source="yesno" label="show or hide fields" />
<FormDataConsumer>
    {({ formData, ...rest }) => formData.yesno && <div>
        <AutocompleteArrayInput source="yesno" label="show or hide fields" choices={[
            { id: 'one', name: '1' },
            { id: 'two', name: '2' },
            { id: 'three', name: '3' }
        ]} {...rest} />
        <TextInput multiline source="text" label=""show or hide me too" {...rest} />
    </div>
    }
</FormDataConsumer>

https://marmelab.com/react-admin/Inputs.html#hiding-inputs-based-on-other-inputs

Omer Cohen 5 年前

您可以在JSX中动态地编写代码

> { isShow ? <TextInput ... /> : null }

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

5 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

6 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

6 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Luckkks · 过渡色工作不正常

6 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

6 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

6 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

6 月前

noblerare · Vite错误-未定义导出(SSR)

6 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

6 月前