【发布时间】：2021-07-16 05:48:12
【问题描述】：
我有 5 种不同的输入用于接受 OTP。我正在使用 6 useState 钩子来获取它们的价值。
现在我想将这 5 个输入值存储在我传递给我的 redux 存储的第 6 个变量中。
我尝试过这种方式，但它返回一个对象并使用parseInt，但它不起作用。
const [otp, setOtp] = useState(null);
const [digitOne, setDigitOne] = useState(null);
const [digitTwo, setDigitTwo] = useState(null);
const [digitThree, setDigitThree] = useState(null);
const [digitFour, setDigitFour] = useState(null);
const [digitFive, setDigitFive] = useState(null);
const handleSubmit = (e) => {
e.preventDefault();
const otp = { digitOne, digitTwo, digitThree, digitFour, digitFive };
console.log(digitOne, digitTwo, digitThree, digitFour, digitFive);
dispatch(checkVerification({ user_info, otp })).then(() => {
console.log(otp);
});
};
return (
<form
onSubmit={handleSubmit}
className="flex flex-col justify-start w-full mt-lg "
>
<div className="flex flex-row justify-between mx-auto max-w-screen-xs space-x-2">
<input
type="text"
className="text-xl w-10 text-center bg-transparent border-t-0 border-l-0 border-r-0 focus:ring-0 focus:border-gray-400 border-b border-gray-400 h-10 "
pattern="[0-9]"
maxLength={1}
value={digitOne}
onChange={(e) => setDigitOne(e.target.value)}
/>
<input
type="text"
className="text-xl w-10 text-center bg-transparent border-t-0 border-l-0 border-r-0 focus:ring-0 focus:border-gray-400 border-b border-gray-400 h-10 "
pattern="[0-9]"
maxLength={1}
value={digitTwo}
onChange={(e) => setDigitTwo(e.target.value)}
/>
<input
type="text"
className="text-xl w-10 text-center bg-transparent border-t-0 border-l-0 border-r-0 focus:ring-0 focus:border-gray-400 border-b border-gray-400 h-10 "
pattern="[0-9]"
maxLength={1}
value={digitThree}
onChange={(e) => setDigitThree(e.target.value)}
/>
<input
type="text"
className="text-xl w-10 text-center bg-transparent border-t-0 border-l-0 border-r-0 focus:ring-0 focus:border-gray-400 border-b border-gray-400 h-10 "
pattern="[0-9]"
maxLength={1}
value={digitFour}
onChange={(e) => setDigitFour(e.target.value)}
/>
<input
type="text"
className="text-xl w-10 text-center bg-transparent border-t-0 border-l-0 border-r-0 focus:ring-0 focus:border-gray-400 border-b border-gray-400 h-10 "
pattern="[0-9]"
maxLength={1}
value={digitFive}
onChange={(e) => setDigitFive(e.target.value)}
/>
</div>
<button className="uppercase flex-grow mt-6 p-2 bg-red-500 text-white px-4 rounded mx-lg">
proceed
</button>
</form>
);
动作
import ApiInstance from "../../Api/root";
import store from "../store";
import { CHECK_VERIFIED } from "../Types/CustomerVerificationTypes";
import {
CUSTOMER_LOGIN_SUCCESS,
GET_CUSTOMER_LOGIN,
} from "../Types/CustomerLoginTypes";
export const checkVerification =
({ user_info, otp }) =>
async (dispatch, getState) => {
const deviceId = getState().device.device.data.device.id;
localStorage.setItem("id", deviceId);
console.log(otp);
const res = await ApiInstance.get(
`customers/otp/verification?mobile_number=${user_info.mobile_number}&country_code=${user_info.country_code}&otp=${otp}&device_id=${deviceId}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
}
)
.then((res) => {
console.log("Auth Token", res.data);
dispatch({
type: CHECK_VERIFIED,
payload: res.data,
});
// todo only if API Call is success
if (res.data.success) {
localStorage.setItem("authToken", res.data.token);
} else {
alert("Entered OTP is wrong, Try Again");
}
})
.catch((error) => {
console.error(error);
});
};
我也将输入的maxLength 设置为 1，但是如何在用户输入数字后将一个输入移到另一个输入？
【问题讨论】：
-
您是在问如何做到这一点
const otp = { digitOne, digitTwo, digitThree, digitFour, digitFive };？有点不清楚您的要求是什么，或者是否有问题。 -
@DrewReese 对此感到抱歉。是的，我只想将这些值存储在一个 otp 变量中。我的方法无法做到这一点，因为它返回一个对象。
-
什么返回一个对象？
otp?当然otp一个对象，这就是你如何将变量打包成一个对象。您是否需要解压缩异步操作或减速器中的值？ -
是的，我想解压缩这些值并将其传递给我的操作。在我的 API 中，我想要纯数字
-
我明白了，您能否更新您的问题以包含您尝试处理此
checkVerification操作的所有代码？
标签： javascript reactjs input redux