[英]How to dynamically show or hide form fields depending on the state of a BooleanInput field in react-admin?
I need to build a complex edit form with react-admin.我需要使用 react-admin 构建一个复杂的编辑表单。 The form has a variety of yes/no sliders made with the BooleanInput component of react-admin.该表单有各种是/否滑块,由 react-admin 的 BooleanInput 组件制成。 If the user sets the slider to "yes", further form fields should appear dynamically, which refer thematically to the slider.如果用户将滑块设置为“是”,则应动态显示更多表单字段,它们在主题上指向滑块。 How do I query the status of the BooleanInput component or would this task be solved in react in a different way?我如何查询 BooleanInput 组件的状态,或者这个任务是否会以不同的方式在反应中解决?
<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" />
I found out: It can be done using FormDataConsumer like this:我发现:它可以使用 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>
See: https://marmelab.com/react-admin/Inputs.html#hiding-inputs-based-on-other-inputs请参阅: https : //marmelab.com/react-admin/Inputs.html#hiding-inputs-based-on-other-inputs
您可以在 JSX 中动态编写代码
> { isShow ? <TextInput ... /> : null }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.