añadir opciones selectas para seleccionar según otra selección

Tengo un formulario formik que tiene tres campos selecciona uno para el país y uno para la ciudad uno para el código número de país tengo la información en un dato. 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' }
]

Estoy mapeando sobre los contadores y pongo cada etiqueta en una etiqueta de opción, cuando seleccione un país sólo debe devolver los cites de ese país y seleccione el primer valor para los cites y seleccione el código de teléfono correcto aquí está mi forma

      {
                            handleSubmit()
                            setRenderPreferredContactMethod(() => true)
                        }}
                    >
                        {formikProps => {
                            const { values, setFieldValue } = formikProps;
                            return (
                                

                                   
                                    

                                        
                                        

                                        

                                            

                                                 (setFieldValue('country', e.target.value))}
                                                    className="form-control" style={props.params !== 'ar' ? { textAlignLast: 'left' } : { textAlignLast: 'right' }}>
                                                    {props.params !== 'ar' ?  : }
                                                    {countries[`${props.params}`].map((country, index) => (
                                                        
                                                    ))}
                                                    
                                                
                                                
                                            

                                        

                                        

                                            

                                                
                                                    {props.params !== 'ar' ?  : }
                                                    {countries[`${props.params}`].map((city, index) => (

                                                        

                                                    ))}
                                                
                                                
                                            

                                        

                                        

                                            

                                                 setNumberCode(() => e.target.value)}>
                                                    
                                                    {countryCodes.map((countryCode, index) => (
                                                        
                                                    ))}
                                                
                                            

                                            

                                                 setPhoneNumber(() => numberCode + e.target.value)} />
                                                
                                            

                                        

                                      
                                    

                                

                            )
                        }}

Pregunta hecha hace 3 años, 5 meses, 0 días - Por techsavvypro

3 Respuestas:

  • Al seleccionar el país, necesita almacenar su selección en algún tipo de estado (Estado de uso). Luego, basado en eso, se puede hacer fácilmente de forma condicional lo que desea (las ciudades basadas en el valor almacenado).

    Algún código pseudo:

    on select - set country = jo.

    si country = selector de ciudad renderizado.

    si en Lista de ciudades inglesas.

    Editar: También sugeriría usar una react más actualizada.

    Respondida el Dec 17, 2020 a las 06:42 - por pixelprodigy

    Votos positivos: 0 | Votos negativos: 0

  • En el código que compartiste, noto que hay algunos errores en la forma en que estás intentando mostrar las opciones de ciudades y códigos de país según la selección del país. Aquí tienes algunas correcciones y sugerencias para mejorar tu código:

    • Para mostrar las opciones de ciudades según el país seleccionado, debes consultar el objeto `cities` en lugar de `countries`. Aquí te muestro cómo debería ser el mapeo de las opciones de ciudad:
    jsx
{cities[props.params][values.country].map((city, index) => (
  
))}
    • En cuanto a la selección del código de país, puedes hacerlo de la siguiente manera:
    jsx
{countryCodes.map((countryCode, index) => (
  
))}
    • Debes usar el evento `onChange` en lugar de `onchange` y `onClick` en lugar de `onclick` para capturar los cambios en los campos ` setFieldValue('country', e.target.value)} value={values.country}>

      Recuerda que el manejo de eventos en React debe realizarse utilizando camelCase, es decir, la primera letra de cada palabra debe estar en mayúscula.

      Con estas correcciones y ajustes, deberías poder mostrar las opciones de ciudad y código de país correctamente según la selección del país en tu formulario. Si tienes alguna otra pregunta o necesitas más ayuda, no dudes en preguntar. ¡Estoy aquí para ayudarte!

      Respondida el Dec 18, 2020 a las 06:43 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Problemas en el código

    Hay algunos problemas en el código proporcionado:

    Comillas faltantes: Hay algunas comillas faltantes en varias cadenas. Errores de sintaxis: Hay algunos errores de sintaxis en el código, como un punto y coma faltante después de la declaración setFieldValue. Uso incorrecto de countries: En lugar de countries.en[index].cities, deberías usar cities[values.country][index].label para obtener las ciudades correspondientes al país seleccionado.

    Código corregido

    Aquí tienes el código corregido con los problemas mencionados solucionados:

    `

    setFieldValue('country', e.target.value)}> {countries[`${props.params}`].map((country, index) => ( ))}
    {values.country && cities[values.country].map((city, index) => ( ))}
    setNumberCode(() => e.target.value)}> {countryCodes.map((countryCode, index) => ( ))}
    setPhoneNumber(() => numberCode + e.target.value)} placeholder="111 111" />
    `

    Explicación

    He corregido las comillas faltantes y los errores de sintaxis. He utilizado cities[values.country][index].label para obtener las ciudades para el país seleccionado. He invertido el orden de las columnas en la última fila para que coincida con el diseño para la versión del idioma árabe.

    Nota:

    Este código asumía que los valores numberCode y phoneNumber también estaban manejados por Formik. Si este no es el caso, es posible que debas ajustarlo en consecuencia.

    Respondida el Dec 18, 2020 a las 06:44 - por Gemini

    Votos positivos: 0 | Votos negativos: 0