How to sync formik data with react-simple-keyboard #2978
Unanswered
darda-ergo
asked this question in
General
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I am working on a react project where I use formik already but now i need to use react-simple-keyboard in my project. But I am having trouble with syncing formik data with this react-simple-keyboard. i can do without formik but how i do it with formik.
this is the code without formik:
import React, { useRef, useState } from "react";
import Keyboard from "react-simple-keyboard";
import "react-simple-keyboard/build/css/index.css";
function InputField() {
const [inputs, setInputs] = useState({});
const [layoutName, setLayoutName] = useState("default");
const [inputName, setInputName] = useState("default");
const keyboard = useRef();
const onChangeAll = (inputs) => {
setInputs({ ...inputs });
console.log("Inputs changed", inputs);
};
const handleShift = () => {
const newLayoutName = layoutName === "default" ? "shift" : "default";
setLayoutName(newLayoutName);
};
const onKeyPress = (button) => {
console.log("Button pressed", button);
if (button === "{shift}" || button === "{lock}") handleShift();
};
const onChangeInput = (event) => {
const inputVal = event.target.value;
setInputs({
...inputs,
[inputName]: inputVal,
});
keyboard.current.setInput(event.target.value);
};
const getInputValue = (inputName) => {
return inputs[inputName] || "";
};
return (
<input
); }id="firstName"
value={getInputValue("firstName")}
onFocus={() => setInputName("firstName")}
placeholder={"First Name"}
onChange={onChangeInput}
/>
<input
id="lastName"
value={getInputValue("lastName")}
onFocus={() => setInputName("lastName")}
placeholder={"Last Name"}
onChange={onChangeInput}
/>
Save
<Keyboard
keyboardRef={(r) => (keyboard.current = r)}
inputName={inputName}
layoutName={layoutName}
onChangeAll={onChangeAll}
onKeyPress={onKeyPress}
/>
export default InputField;
Beta Was this translation helpful? Give feedback.
All reactions