[英]React: How to trigger onChange event from a different onChange event?
Im trying to implement the phone input field
with select
drop down window for country region.我正在尝试使用
select
为国家/地区下拉 window 来实现电话input field
。
You click on select
window, chose a country code and it adds that country code to phone mask input: +1 (###) ###-####
or +44 (###) ###-####
or any other country code.您单击
select
window,选择一个国家代码并将该国家代码添加到电话掩码输入: +1 (###) ###-####
或+44 (###) ###-####
或任何其他国家/地区代码。
Right now, when i change country code from select
window, it doesnt trigger onChange
event from phone input field
.现在,当我从
select
window 更改国家代码时,它不会从电话input field
触发onChange
事件。 Eg: we did input [+1] (123)111-1111, onChange event recorded the phone value +1 (123)111-1111
, we change the country code > [+44] (123)111-1111 and phone value stays the same +1 (123)111-1111
例如:我们确实输入了 [+1] (123)111-1111,
onChange event recorded the phone value +1 (123)111-1111
,我们更改国家代码 > [+44] (123)111-1111 和phone value stays the same +1 (123)111-1111
Question : how can i trigger onChange
event from phone input field to be fired, when phone code value in select
window is changed?问题:当
select
window 中的电话代码值更改时,如何从电话输入字段触发onChange
事件?
Here is the code of main component:这是主要组件的代码:
import {
FormControl,
InputBase,
InputLabel,
makeStyles,
MenuItem,
Select,
} from "@material-ui/core";
import React, { useState } from "react";
import PropTypes from "prop-types";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import NumberFormat from "react-number-format";
import * as services from "../services/services";
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
flexDirection: "row",
},
inputPhone: {
right: theme.spacing(12),
},
inputPhoneField: {
width: "113.5%",
},
selectPhoneCode: {
width: "60%",
},
}));
const countries = services.getCountries();
function NumberFormatCustom(props) {
const { inputRef, value, phoneCode, isEditForm, ...other } = props;
if (isEditForm) {
return <InputBase {...other} value={value} />;
} else {
if (phoneCode == "") {
return <NumberFormat {...other} type="text" />;
} else {
return (
<NumberFormat
{...other}
ref={(ref) => {
inputRef(ref ? ref.inputElement : null);
}}
format={"+" + phoneCode + " (###) ###-####"}
value={value}
mask="_"
/>
);
}
}
}
NumberFormatCustom.propTypes = {
inputRef: PropTypes.func.isRequired,
};
export default function PhoneMaskWithSelect(props) {
const classes = useStyles();
const { value, name, label, isEditForm, onChange } = props;
const [phoneCode, setPhoneCode] = useState(1);
const placeHolder = phoneCode
? "+" + phoneCode + " (123) 456-7890"
: "type number...";
const handleChange = (e) => {
const { name, value } = e.target;
setPhoneCode(value);
};
return (
<div className={classes.root}>
<FormControl variant="outlined">
<Select
disabled={isEditForm}
className={classes.selectPhoneCode}
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
color="primary"
value={phoneCode}
onChange={handleChange}
>
{countries.map((item) => (
<MenuItem key={item.code} value={item.phoneCode}>
{!isEditForm ? "(" + item.code + ")" + " +" + item.phoneCode : ""}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl variant="outlined" className={classes.inputPhone}>
<InputLabel shrink htmlFor="component-outlined">
{label}
</InputLabel>
<OutlinedInput
notched
className={classes.inputPhoneField}
labelWidth="50"
name={name}
onChange={onChange}
id="formatted-text-mask-input"
placeholder={placeHolder}
inputComponent={NumberFormatCustom}
inputProps={{
value,
phoneCode,
isEditForm,
inputPhoneValue,
}}
/>
</FormControl>
</div>
);
}
And services component code:和服务组件代码:
export const getCountries = () => ([
{ code: "BY", label: "Belarus", phoneCode: 375 },
{ code: "CN", label: "China", phoneCode: 86 },
{ code: "FR", label: "France", phoneCode: 33 },
{ code: "GB", label: "United Kingdom", phoneCode: 44 },
{ code: "IN", label: "India", phoneCode: 91 },
{ code: "JP", label: "Japan", phoneCode: 81 },
{ code: "PL", label: "Poland", phoneCode: 48 },
{ code: "RU", label: "Russian Federation", phoneCode: 7 },
{ code: "UA", label: "Ukraine", phoneCode: 380 },
{ code: "US", label: "United States", phoneCode: 1 },
{ code: "Others", label: "Other codes", phoneCode: "" },
]);
According to what you describe the value of input doesn't seem to depend on phoneCode
state.根据您所描述的输入值似乎并不取决于
phoneCode
state。 So either you have to do it here, something like:所以要么你必须在这里做,比如:
inputProps={{
value: phoneCode + value,
phoneCode,
isEditForm,
inputPhoneValue,
}}
Or you have to update your OutlinedInput
to consider updates to phoneCode
and update value accordingly, something like或者您必须更新
OutlinedInput
以考虑更新phoneCode
并相应地更新值,例如
<InputBase {...other} value={ phoneCode + value} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.