Question

我在编辑表单中遇到问题，我必须在输入字段（前缀）上显示来自 api 的国家/地区代码。显示后我需要获取该值并将其设置为 state。我在完成 onchange 时从输入字段（前缀）中获取值，但我需要没有 onchange 的值。我的意思是在下拉列表中我需要获取该值。我需要显示我用表单提交的任何国家代码。然后，如果用户需要更改国家/地区代码，则他将选择国家/地区。根据国家/地区选择，我需要显示国家/地区代码并将其设置为状态。希望你能理解我的问题...

这是我的代码.....

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>

提前致谢.....

Answer 1

你必须换个角度思考：
不要“从输入字段中获取值”，而是使用 useState 存储当前值并设置 Form.Control 的值，例如value={ currentCountryCode }。

参见：controlled-components。

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>
    </>);
};

如何将默认值设置为前缀或输入字段中的状态

1 个答案: