如何合並兩個 onChange 事件？

Question

我有一個 API 從表單接收數據對於電話輸入，它需要國家代碼。 因此，我設置了 react-phone-number-input 以格式化通過輸入發送的電話號碼，但它最終與 API 發布請求沖突，因為 react-phone-number-input 和發布請求都使用 onChange 事件處理程序工作

所以現在，react-phone-number-input 起作用了。 但我無法將值發送到 API

我該如何解決這個問題，請忽略 API 是否有效。 我需要的是它先控制台記錄值，然后我自己解決 API 問題

提前致謝

codesanbox 鏈接到以下代碼： https://codesandbox.io/s/verigo-forked-lh4i7?file=/src/pages/DeliveryExecutive.js

function DeliveryExecutive() {
const [phoneValue, setPhoneValue] = useState();
const [formData, setFormData] = useState({
    userType: 4,
    name: "",
    surname: "",
    phoneNumber: "",
    email: "",
    password: "",
    referralCode: "" });

const {
    name,
    surname,
    phoneNumber,
    email,
    password,
    referralCode
  } = formData;


const onInputChange = (e) => {
    const value =
      e.target.type === "checkbox" ? e.target.checked : e.target.value;

    setFormData({
      ...formData,
      [e.target.name]: value
    });
  };



const onSubmit = async (e) => {
    e.preventDefault();
    console.log("formData", { ...formData });

    const { data } = await axios.post(
      "http://api.myverigo.com/api/services/app/Account/User",
      formData,
      {
        headers: {
          clientid: "Client id",
          clientsecret: "client secret"
        }
      }
    );

    console.log("response data", data);
  };

return (
<div>
  <form id="login-form" onSubmit={onSubmit}>
  <div class="form-group">
      <input
                  type="tel"
                  name="phoneNumber"
                  value={phoneNumber}
                  onChange={onInputChange}
                  id="phone"
                  className="de-input form-control leave-message-input rounded-pill"
                  placeholder="Enter your mobile number"
                  required
                />
      
    </div>
    <div class="form-group">
      <PhoneInput
        className="de-input form-control leave-message-input rounded-pill"
        placeholder="Enter your mobile number"
        name="phoneNumber"
        country="NG"
        value={phoneValue}
        onChange={setPhoneValue}
        required
      />
    </div>

    <button type="submit" class="btn login-btn rounded-pill">
      Become a partner
    </button>
  </form>
</div>
  );
}

Answer 1

const firstFunc = async () => {
   await //do some stuff
   secondFunc()
}