Блог

У меня проблема в форме редактирования, я должен отобразить код страны из api в поле ввода (префикс). после отображения мне нужно получить это значение и установить его в состояние. Я получаю значение из поля ввода (префикс), когда когда-либо выполняется onchange, но мне нужно значение без onchange.Я имею в виду все, что мне нужно в выпадающем списке, чтобы получить это значение. Мне нужно отобразить код страны независимо от того, что я отправил с помощью формы. Затем, если пользователю необходимо изменить код страны, он выберет страну. На основе выбора страны мне нужно отобразить код страны и установить для него значение state. Надеюсь, вы поймете мой вопрос…

Вот мой код…..

 const [countryCode, setcountryCode] = useState([]) // I am setting Api data into this state

const [subscriber, setSubscriber] = useState({  // here I am getting data what ever I sent to backed...
countryCode: "",

)}
                     
                       <Form.Control 
                                className='add_option' 
                                 type='text' 
                                  name='CountryCode'
                                 onChange={handleChange} 
                                   as="select" required  >
                                           
                                            {
                                                countryCode.map((codes, idx) => (
                                                    <option
                                                        key={idx}
                                                        required
                                                        name='CountryCode'
                                                        className='add_opt'
                                                        value={codes.CountryCode}
                                                          defaultValue={codes.CountryCode}
                                                    >
                                                        {codes.countryCode1}

                                                    </option>

                                                ))
                                            }

                                        </Form.Control>   
 

Заранее спасибо…..

Вы должны думать наоборот:
не «получать значение из поля ввода», а вместо этого сохранять текущее значение с useState помощью и устанавливать Form.Control значение с помощью, например value={ currentCountryCode } .

См.: контролируемые компоненты.

onChange Устанавливает состояние (например setCurrentCountryCode() ), а Form.Control возвращает значение из состояния.

Затем любое другое событие также может установить состояние ( setCurrentCountryCode() ), любая другая функция может использовать текущее состояние ( currentCountryCode ) .

Например.:

 import React, { useEffect, useState } from 'react';
import Form from 'react-bootstrap/Form';

export const SelectValue = () => {
    const [ currentCountryCode, setCurrentCountryCode ] = useState(''); // <-- store selected value in state
    const [ countryCode, setcountryCode ] = useState([
        { countryCode: 'xx' },
        { countryCode: 'yy' },
        { countryCode: 'zz' },
    ]);

    const handleChange = function( x ){
        setCurrentCountryCode(x.target.value) // <-- set state by selected value
    };

    useEffect(()=>{
        /*
        fetchCurrentCountryCode().then((value)=>{  // <-- maybe fetch the current value, or something
            setCurrentCountryCode( value )         // <-- set state by fetched value
        })
        */
    }, []);

    useEffect(()=>{
        console.log('currentCountryCode:', currentCountryCode); // <-- do what ever you want with most recent value
    }, [ currentCountryCode ]);

    return (<>
        <Form.Control
            type='text'
            onChange={ handleChange }
            as="select"
            value={ currentCountryCode } // <-- set the value from state
        >
            {
                countryCode.map((codes, idx) => (
                    <option
                        key={ idx }
                        value={ codes.countryCode }
                    >
                        { codes.countryCode }
                    </option>
                ))
            }
        </Form.Control>
    </>);
};