سلام من توی دیکت مبتدی هستم ، یک قالب HTML رو تبدیل به ریکت کردم میخوام مقادیر نام کاربری و پسورد روبخونم و هندل کنم ، چون قالب آماده ست یه ID زده که میفرسته به یک فایل JS ، چطور میتونم تابع handleSubmit که ساختم داخل اون فایل وارد کنم ؟
<form className="form" id="kt_login_signin_form">
<div className="form-group mb-5">
<input className="form-control h-auto form-control-solid py-4 px-8" value={userName} onChange={e=>setUserName(e.target.value)} type="text" placeholder="نام کاربری" name="username" autocomplete="off" />
</div>
<div className="form-group mb-5">
<input className="form-control h-auto form-control-solid py-4 px-8" password={password} onChange={e=>setPassword(e.target.value)} type="password" placeholder="کلمه عبور" name="password" />
</div>
<div className="form-group d-flex flex-wrap justify-content-between align-items-center">
<div className="checkbox-inline">
<label className="checkbox m-0 text-muted">
<input type="checkbox" name="remember" />
<span></span>
مرا به خاطر بسپار
</label>
</div>
<a href="javascript:;" id="kt_login_forgot" className="text-muted text-hover-primary">کلمه عبور را فراموش کرده اید؟</a>
</div>
<button id="kt_login_signin_submit" className="btn btn-primary font-weight-bold px-9 py-4 my-3 mx-4">ورود</button>
</form>
این قالب توسط id="kt_login_signin_form فرم رو سابمیت میکنه
من همچین کدی رونوشتم که میخوام داخل فایل زیر قرار بدم
const handleSubmite = async event => {
event.preventDefault();
const user = { userName, password } // exact in Server name
try {
const { status, data } = await loginUser(user)
if (status === 200) { //success Login
toast.success("ورود با موفقیت انجام شد.", {
position: 'top-right',
closeOnClick: true,
rtl: true
});
console.log(data);
reset();
}
}
catch (ex) {
console.log(ex);
toast.error("مشکلی پیش آمده", {
position: 'top-right',
closeOnClick: true,
rtl: true
})
}
}
$('#kt_login_signin_submit').on('click', function (e) {
e.preventDefault();
validation.validate().then(function(status) {
if (status == 'Valid') {
//اینجا باید قرار بگیره
swal.fire({
text: "ارسال اطلاعات به سرور انجام شد",
icon: "success",
buttonsStyling: false,
confirmButtonText: "باشه فهمیدم!",
customClass: {
confirmButton: "btn font-weight-bold btn-light-primary"
}
}).then(function() {
KTUtil.scrollTop();
});
سلام کمی با jquery تفاوت دارد اما می توانید طبق مستندات react یا سایت w3schools جلو برید.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟