如何根据先前 select 输入 reactjs 中选择的值 show/hide select 输入？

Question

我是 reactjs 的新手，这里我有一个表单，在那个表单中我有一个输入 select 和两个值选项。

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

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

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

我的表格

// 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>

第二个输入 show/hide

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>

谢谢

Answer 1

类似...

const [firstOptionValue, setFirstOptionValue] = useState(null)

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

然后当你想有条件地渲染第二个时 select...

{firstOptionValue && <SecondSelectContainer/>}

所以 SecondSelectContainer 中的内容只有在 firstOptionValue 不是假的情况下才会呈现。

如何根据先前 select 输入 reactjs 中选择的值 show/hide select 输入？

How to show/hide a select input according to a value chosen in a previous select input reactjs?

select

onchange

reactjs