如果我在 React 中单击 RadioButtonGroupInput 标签，如何隐藏其他标签？答案

【问题标题】：How to hide other tag if i click a RadioButtonGroupInput tag in React?如果我在 React 中单击 RadioButtonGroupInput 标签，如何隐藏其他标签？
【发布时间】：2019-06-12 08:35:47
【问题描述】：

当我单击 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>
);

【问题讨论】：

标签： reactjs onchange react-admin

【解决方案1】：

您可以集成useState() 挂钩以与RadioButtonGroupInput 协调。它允许我们定义一个checked 值和一个专门用于更新checked 的setChecked 函数。

当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>
);

【讨论】：

太棒了！我将不得不搜索 React Hook 以获取更多信息。

【解决方案2】：

最后，我做到了。请参阅以下来源。

const UserCreate = ({ classes, ...props }) => {
    const types = [
        {id:'INDIVIDUAL'},
        {id:'COMPANY'}
    ];

    const [checked,setChecked] = useState(true);

    const onClickRadioBtn = (event,id) => {
        (id === "COMPANY") ? setChecked(false) : setChecked(true)
    }

    return(
        <Create {...props}>
            <SimpleForm>
                <TextInput source="username" validate={required()}/>
                <TextInput source="password" 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={onClickRadioBtn}/>
                { !checked && (
                    <ReferenceInput label="Company" source="company.id" reference="companies">
                        <SelectInput optionText="name" />
                    </ReferenceInput>
                )}
            </SimpleForm>
        </Create>
    );
};

【讨论】：