React：如何從不同的 onChange 事件觸發 onChange 事件？

Question

我正在嘗試使用select為國家/地區下拉 window 來實現電話input field 。

您單擊select window，選擇一個國家代碼並將該國家代碼添加到電話掩碼輸入： +1 (###) ###-####或+44 (###) ###-####或任何其他國家/地區代碼。

現在，當我從select window 更改國家代碼時，它不會從電話input field觸發onChange事件。 例如：我們確實輸入了 [+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

問題：當select window 中的電話代碼值更改時，如何從電話輸入字段觸發onChange事件？

這是主要組件的代碼：

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

和服務組件代碼：

  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: "" },
  ]);

Answer 1

根據您所描述的輸入值似乎並不取決於phoneCode state。 所以要么你必須在這里做，比如：

inputProps={{
        value: phoneCode + value,
        phoneCode,
        isEditForm,
        inputPhoneValue,
      }}

或者您必須更新OutlinedInput以考慮更新phoneCode並相應地更新值，例如

<InputBase {...other} value={ phoneCode + value} />