如何根据先前选择输入 reactjs 中选择的值显示/隐藏选择输入？

问题描述

我是 reactjs 的新手，这里有一个表单，在该表单中我有一个带有两个值选项的输入选择。

第一个值选项应该允许我使用这些值选项调出第二个输入选择，而第二个则什么都没有。

我制作了表单，对于第一个输入选择，我设法执行了一个 onChange 方法，以检索所选值，但现在如何对所选值进行测试，以显示或不显示第二个输入选择？>

以及如何显示或隐藏第二个输入选择？

我的表单

// methode that retrieve the chosen value in input select
const handleOptionChange = (event: any) => {
    console.log(event);
};


const FormContent = (props: any) => {
    const { control,handleSubmit,errors } = useForm();
    const { Option } = Select;
    
    const onSubmit = handleSubmit((data) => {

        console.log(data);
        
    });

    return (
        <form onSubmit={onSubmit}>
            
            <Row gutter={8}>
                <Col md={12} lg={12} sm={24}>
                    <div className="ant-form-item">
                        <label className="label">Nom Utilisateur <span className="text-danger">*</span></label>
                        <Controller
                            // as={inputField("Nom Utilisateur")}
                            name="username"
                            control={control}
                            defaultValue={""}
                            rules={{ required: true }}
                            render={props => (<><Input name={props.name} defaultValue={props.value} className="ant-form-item-control" placeholder="Nom Utilisateur" /></>)}
                        />
                        {errors.username && "First name is required"}
                    </div>
                </Col>
                <Col md={12} lg={12} sm={24}>
                    <div className="ant-form-item">
                        <label className="label">Mot de passe <span className="text-danger">*</span></label>
                        <Controller
                            // as={inputPassField()}
                            name="password"
                            control={control}
                            defaultValue={""}
                            rules={{ required: true }}
                            render={props => (<Input.Password placeholder="Mot de passe" />)}
                        />
                        {errors.password && "First name is required"}
                    </div>
                </Col>
            </Row>
            <Row gutter={8}>
               
                <Col md={12} lg={12} sm={24}>
                    <div className="ant-form-item">
                        <label className="label">Profile<span className="text-danger">*</span></label>
                        <Controller
                            name="profile"
                            control={control}
                            defaultValue={""}
                            rules={{ required: true }}
                            render={({ onChange,value,name }) => (
                                <Select
                                    showSearch
                                    placeholder="Select a person"
                                    onChange={(event) => {
                                        onChange(event)
                                        handleOptionChange(event)
                                    }}
                                    value={value ? value : ""}
                                    // name={name}
                                    optionFilterProp="children"
                                    filterOption={(input,option: any) =>
                                        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    }>
                                    <option key="b2b_user" value="B2B_CLIENT">B2B_USER</option>
            <option key="app_user" value="APPLICATION_USER">USER_SIMPLE</option>
                                </Select>)}

                        />
                        {errors.profile && "Profile is required"}
                    </div>
                </Col>
            </Row>
            
            <Row gutter={8}>
                <Col md={12} lg={12} sm={24}>

                    <Flex alignItems="center" justifyContent="center">
                        <Button onClick={() => props.onClose()} icon={<CloSEOutlined />} size="small" className="mr-3" type="text">Annuler</Button>

                        <Button icon={<CheckCircleOutlined />} type='primary' htmlType='submit'>
                            Valider
            </Button>
                    </Flex>

                </Col>
            </Row>
        </form>);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

显示/隐藏的第二个输入

export const SelectCompanyField = () => {
    const [page,setPage] = useState(1);
    const [perPage,setPerPage] = useState(10);
    const { data,error } = useSWR<ServerResponse,any>(companyUrls.base + `?page:${page}&perPage:${perPage}`,url => getDataByParams(companyUrls.base,{ page: '' + page,perPage: '' + perPage }));
    console.log("Data",data,"Error",error);
    console.log(data?.entities);

    return (
        <Select
            showSearch
            placeholder="Choisir une compagnie"
            optionFilterProp="children"
            filterOption={(input,option: any) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
        >
            {data?.entities.map(d => (
                <option value={d.index} key={d.id} >
                    {d.name}
                </option>
            ))}

        </Select>
    );
};
// the second input select to show/hide 
<Col md={24} lg={24} sm={24}>
                    <div className="ant-form-item">
                        <label className="label">Compagnie <span className="text-danger">*</span></label>
                        <Controller
                            as={SelectCompanyField()}
                            name="company"
                            control={control}
                            defaultValue={""}
                            rules={{ required: false }}
                        />
                        {errors.company && "Company is required"}
                    </div>
 </Col>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

谢谢

解决方法

有点像……

const [firstOptionValue,setFirstOptionValue] = useState(null)

const handleOptionChange = (event: any) => {
    setFirstOptionValue(event.target.value)
};

然后当你想有条件地渲染第二个选择...

{firstOptionValue && <SecondSelectContainer/>}

因此，SecondSelectContainer 中的任何内容仅在 firstOptionValue 不为 false 时才会呈现。