时间戳

首页 > 解决方案 > 如何将默认值设置为来自前缀或输入字段的状态

javascript - 如何将默认值设置为来自前缀或输入字段的状态

问题描述

我在编辑表单中遇到问题，我必须在输入字段（前缀）上显示来自 api 的国家代码。显示后我需要获取该值并将其设置为状态。当 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>

提前致谢.....

标签： javascriptreactjs

解决方案

您必须换一种方式思考：
不要“从输入字段中获取值”，而是使用 eg存储当前值useState并设置值。Form.Controlvalue={ 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>
    </>);
};

推荐阅读