当我单击React中的RadioButton时，我想隐藏其他标签。单击RadioButtonGroupInput时，我要隐藏ReferenceInput标签。如果你知道如何，请发表评论..
const UserEdit = ({ classes, ...props }) => (
<Edit {...props}>
<SimpleForm>
<TextInput source="username" validate={required()}/>
<TextInput source="email" validate={[required(),email()]}/>
<TextInput source="phoneNumber" validate={[required(),minLength(10),number()]}/>
<RadioButtonGroupInput label="Type"
source="userType"
choices={types}
optionText="id"
validate={required()}
onChange={(event,id) => (id === "COMPANY") ? console.log(id) : console.log(event)}/>
<ReferenceInput label="Company" source="company.id" reference="companies">
<SelectInput optionText="name" />
</ReferenceInput>
</SimpleForm>
</Edit>
);
您可以集成useState()挂钩以与协调RadioButtonGroupInput。它使我们可以定义一个checked值和一个setChecked专门用于更新的函数checked。
当onChange()事件监听器被触发，我们将切换checked值。然后我们习惯checked了条件渲染ReferenceInput
import React, { useState } from "react
const UserEdit = ({ classes, ...props }) => (
//creates a state-value and a state-updater function. Set default as false.
const [ checked, setChecked ] = useState(false)
<Edit {...props}>
<SimpleForm>
<TextInput source="username" validate={required()}/>
<TextInput source="email" validate={[required(),email()]}/>
<TextInput source="phoneNumber" validate={[required(),minLength(10),number()]}/>
<RadioButtonGroupInput
label="Type"
source="userType"
choices={types}
optionText="id"
validate={required()}
onChange={() => setChecked(!checked)}/> //set to opposite of current-value
//if not checked, then we will display ReferenceInput, if checked, hide.
{ !checked && (
<ReferenceInput label="Company" source="company.id" reference="companies">
<SelectInput optionText="name" />
</ReferenceInput>
)}
</SimpleForm>
</Edit>
);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句