Saya baru mengenal reactjs, dan di sini saya memiliki formulir, dan dalam formulir itu saya memiliki pilihan input dengan dua opsi nilai.

Dan opsi nilai pertama harus memungkinkan saya untuk memunculkan pilihan input kedua dengan opsi nilai ini, dan yang kedua tidak sama sekali.

Saya membuat formulir saya dan untuk pemilihan input pertama saya berhasil melakukan metode onChange, untuk mengambil nilai yang dipilih, tetapi sekarang bagaimana melakukan tes pada nilai yang dipilih, untuk menampilkan atau tidak input kedua pilih?

Dan bagaimana cara menampilkan atau menyembunyikan pilihan input kedua ini?

Formulir Saya

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

Masukan kedua untuk ditampilkan/sembunyikan

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>

Terima kasih

0
Mohamed Sacko 6 Mei 2021, 03:52

1 menjawab

Jawaban Terbaik

Sesuatu seperti...

const [firstOptionValue, setFirstOptionValue] = useState(null)

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

Kemudian ketika Anda ingin merender secara kondisional, pilih kedua ...

{firstOptionValue && <SecondSelectContainer/>}

Jadi apa pun yang ada di SecondSelectContainer hanya akan dirender jika firstOptionValue tidak salah.

0
Bafsky 6 Mei 2021, 01:08