如何解决如何合并两个 onChange 事件?
我有一个从表单接收数据的 API 对于电话输入,它需要一个国家代码。然后我设置了 react-phone-number-input 来格式化通过输入发送的电话号码,但它最终与 API post 请求发生冲突 因为 react-phone-number-input 和 post 请求都使用 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>
);
}
解决方法
const firstFunc = async () => {
await //do some stuff
secondFunc()
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。