У меня есть следующий код:
...
return (
<FormItem key={name}>
<Label htmlFor={id}>{camelCaseToTitleCase(fieldKey)}</Label>
{
fieldKey === 'homePhone'
?
<Field name={`${key}.${fieldKey}.value`} validate={validate(fieldKey)}>
{props =>
(
<>
<PhoneNumberInput
disabled={disabled}
data-bdd={`customer_details_field_${fieldKey}`}
id={id}
value={props.input.value}
// onChange={(val: string):any => console.log(val)}
{...props}
/>
</>
)
}
</Field>
...
где phoneinput:
const PhoneNumberInput: React.FC<PhoneNumberInputProps> = (props) => {
const {
disabled,
id,
label,
value
} = props
const [updatedValue, setUpdatedValue] = useState(value)
const DEFAULT_COUNTRY_VALUE = 'GB'
const handleONChange = (val: string) => {
setUpdatedValue(val)
}
return (
<>
<Label htmlFor={id}>{label}</Label>
<PhoneInput
disabled={disabled}
id={id}
defaultCountry={DEFAULT_COUNTRY_VALUE}
value={updatedValue}
onChange={(phone: string) => handleONChange(phone)}
/>
value: {updatedValue}
</>
)
}
, когда я отправляю форму, значение из PhoneNumberInput
все еще приходит из props.input.value
и не отражает то, что обновляется в value: {updatedValue}
.
Компонент phoneInput отображает обновленное значение, но это же значение не отправляется при отправке из.
Значение, начинающееся с +44, - это то, что я хотел бы отправить в свой BE, но оно все равно отправляет то, что когда-либо было внутри props.input.value