sorry to ask this simple question but I'm new to React and I am trying to use the keyboard library from hodgef/react-simple-keyboard, along with Ant Design to try creating a login page. I pretty much followed the code sample from this Codesandbox Example and things works fine, until I replaced the default input tag into Ant-Design's Input component.
From this:
<input
id="firstName"
value={getInputValue("firstName")}
onFocus={() => setInputName("firstName")}
placeholder={"First Name"}
onChange={onChangeInput}
/>
Into this
<Form.Item
label={<text style={{ color: 'white' }}>Username</text>}
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
style={{ color: 'white' }}
>
<Input
id="inputUserName"
value={getInputValue('inputUserName')}
onFocus={() => setInputName('inputUserName')}
placeholder="User Name"
onChange={onChangeInput}
/>
</Form.Item>
After using Ant Design's Components, the input will not update anymore when I press the keyboard buttons.
Anyone in this community know what is the problem causing this? Is it because the <Input> is nested inside <Form.Item> , which made the ref not working anymore?
So if I were to use only input, without nested inside Form.Item it will still works:
<Input
id="inputUserName"
value={getInputValue('inputUserName')}
onFocus={() => setInputName('inputUserName')}
placeholder="User Name"
onChange={onChangeInput}
/>
Much appreciated if anyone could answer this stupid question, I'm really new and I don't even know what to search for to begin with, and really sorry for my poor English, I don't know how to explain or elaborate further.
Fixed by following this code sample from ANTD.
Basically I added following lines to call the form method.
const [form] = Form.useForm();
Then assigning the input values in the onChangeAll listener in the keyboard component as follows:
const onChangeAll = (inputs) => {
setInputs({ ...inputs });
form.setFieldsValue({
username: `${inputs.inputUserName}`,
password: `${inputs.inputPassword}`,
});
};
Also don't forgot to add this line in the Form component
<Form
form={form}
...
>