添加选择选项以根据另一个选择进行选择

Question

我有一个 formik 表单，其中包含三个字段，一个用于国家，一个用于城市，一个用于国家代码，我在 data.js 中有信息

export const countries = {
    en: [
        { value: 'jo', label: 'Jordan',
        { value: 'ae', label: 'United Arab Emirates},
        { value: 'sa', label: 'Saudi Arabia'},
        { value: 'iq', label: 'Iraq', },
        { value: 'kw', label: 'Kuwait'},
        { value: 'qa', label: 'Qatar'},
        { value: 'lb', label: 'Lebanon'}
    ],
    ar: [
        { value: 'jo', label: 'الاردن' },
        { value: 'ae', label: 'الامرات العربيه المتحدة' },
        { value: 'sa', label: 'السعوديه' },
        { value: 'iq', label: 'العراق' },
        { value: 'kw', label: 'الكويت' },
        { value: 'qa', label: 'قطر' },
        { value: 'lb', label: 'لبنان' }
    ] }
export const cities = {
    en: {
        ae: [
            { value: 'dubai', label: 'Dubai' },
            { value: 'abudhabi', label: 'Abu Dhabi' }
        ],
        jo: [{ value: 'amman', label: 'Amman' }],
        qa: [{ value: 'doha', label: 'Doha' }],
        kw: [{ value: 'kuwait', label: 'Kuwait' }],
        sa: [
            { value: 'riyadh', label: 'Riyadh' },
            { value: 'jeddah', label: 'Jeddah' },
            { value: 'khobar', label: 'Khobar' },
            { value: 'dhahran', label: 'Dhahran' },
            { value: 'dammam', label: 'Dammam' },
        ],
        lb: [{ value: 'beirut', label: 'Beirut' }],
        iq: [{ value: 'baghdad', label: 'Baghdad' }]
    },
    ar: {
        ae: [
            { value: 'dubai', label: 'دبي' },
            { value: 'abudhabi', label: 'ابو ظبي' }
        ],
        jo: [{ value: 'amman', label: 'عمان' }],
        qa: [{ value: 'doha', label: 'الدوحه' }],
        kw: [{ value: 'kuwait', label: 'الكويت' }],
        sa: [
            { value: 'riyadh', label: 'الرياض' },
            { value: 'jeddah', label: 'جدة' },
            { value: 'khobar', label: 'الخبر' },
            { value: 'dhahran', label: 'الظهران' },
            { value: 'dammam', label: 'الدمام' },
        ],
        lb: [{ value: 'beirut', label: 'بيروت' }],
        iq: [{ value: 'baghdad', label: 'بغداد' }]
    } }
export const countryCodes = [
    { value: '+962', label: '+962', code: 'jo' },
    { value: '+966', label: '+966', code: 'sa' },
    { value: '+965', label: '+965', code: 'kw' },
    { value: '+964', label: '+964', code: 'iq' },
    { value: '+961', label: '+961', code: 'lb' },
    { value: '+974', label: '+974', code: 'qa' },
    { value: '+971', label: '+971', code: 'ae' }
]

I'm mapping over the counters and put every one label in an option tag, when select a country should only return the cites of that country and auto select the first value for the cites and select the correct phone code 这是我的表格

     <Formik
                        initialValues={initialValues}
                        validationSchema={props.params !== 'ar' ? FormSchmaEn : FormSchmaAr}
                        onSubmit={() => {
                            handleSubmit()
                            setRenderPreferredContactMethod(() => true)
                        }}
                    >
                        {formikProps => {
                            const { values, setFieldValue } = formikProps;
                            return (
                                <div className='container' style={{ marginTop: '150px' }}>
                                   
                                    <Form className="container">
                                        
                                        <hr style={{ maxWidth: '480px', width: '100%' }} />
                                        <div className="row justify-content-center">
                                            <div className="col form-input" style={{ marginBottom: '10px', width: '100%', maxWidth: "500px" }}>
                                                <Field as="select" name='country' value={values.country} onChange={e => (setFieldValue('country', e.target.value))}
                                                    className="form-control" style={props.params !== 'ar' ? { textAlignLast: 'left' } : { textAlignLast: 'right' }}>
                                                    {props.params !== 'ar' ? <option value="Country">Country</option> : <option value="Country" hidden>البلد</option>}
                                                    {countries[`${props.params}`].map((country, index) => (
                                                        <option key={index} value={countries.en[index].label} onChange={e => setFieldValue('city', countries.en[index].cities)}>{country.label}</option>
                                                    ))}
                                                    
                                                </Field>
                                                <ErrorMessage name="country" component="div" style={{ color: 'red' }} />
                                            </div>
                                        </div>
                                        <div className="row justify-content-center">
                                            <div className="col form-input" style={{ marginBottom: '10px', width: '100%', maxWidth: "500px" }}>
                                                <Field value="test" as="select" type="text" name='city' className="form-control" style={props.params !== 'ar' ? { textAlignLast: 'left' } : { textAlignLast: 'right' }}>
                                                    {props.params !== 'ar' ? <option hidden></option> : <option value="المدينه" hidden>{country.cities}</option>}
                                                    {countries[`${props.params}`].map((city, index) => (

                                                        <option key={index} >{city.cities.label}</option>

                                                    ))}
                                                </Field>
                                                <ErrorMessage name="city" component="div" style={{ color: 'red' }} />
                                            </div>
                                        </div>
                                        <div className={props.params !== 'ar' ? "row justify-content-center" : "row justify-content-center flex-row-reverse"}>
                                            <div className="col-4 form-input" style={{ marginBottom: '10px', width: '100%', maxWidth: "150px" }}>
                                                <Field as="select" type="text" name='numberCode' className="form-control" onClick={(e) => setNumberCode(() => e.target.value)}>
                                                    <option value="+1" hidden>+1</option>
                                                    {countryCodes.map((countryCode, index) => (
                                                        <option key={index}>
                                                            {countryCodes[index].label}
                                                        </option>
                                                    ))}
                                                </Field>
                                            </div>
                                            <div className="col-8 form-input" style={{ marginBottom: '10px', width: '100%', maxWidth: "350px" }}>
                                                <Field type="text" name="phoneNumber" className={props.params !== 'ar' ? "form-control" : "form-control ar"} placeholder="111 111" onKeyUp={(e) => setPhoneNumber(() => numberCode + e.target.value)} />
                                                <ErrorMessage name="phoneNumber" component="div" style={{ color: 'red' }} />
                                            </div>
                                        </div>
                                      
                                    </Form>
                                </div>
                            )
                        }}
                    </Formik>

<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

选择国家后，您需要将您的选择存储在某种状态（useState）中。然后在此基础上，您可以轻松地有条件地渲染您想要的内容（基于储值的城市）。

一些伪代码：

在选择时 - 设置国家 => jo.

如果country => 渲染城市选择器。

如果en => 输出英文城市列表。

编辑：我还建议使用更新的反应。