Lamento hacer esta simple pregunta, pero soy nuevo en React y estoy tratando de usar la biblioteca de teclado de hodgef/react-simple-keyboard , junto con Ant Design para intentar crear una página de inicio de sesión. Prácticamente seguí el ejemplo de código de este ejemplo de Codesandbox y todo funciona bien, hasta que reemplacé la etiqueta de entrada predeterminada en el componente de entrada de Ant-Design.
De esto:
<input id="firstName" value={getInputValue("firstName")} onFocus={() => setInputName("firstName")} placeholder={"First Name"} onChange={onChangeInput} />Dentro de esto
<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>Después de usar los componentes de Ant Design, la entrada ya no se actualizará cuando presione los botones del teclado.
¿Alguien en esta comunidad sabe cuál es el problema que causa esto? ¿Es porque <Input> está anidado dentro <Form.Item> , lo que hizo que la referencia ya no funcionara?
Entonces, si tuviera que usar solo entrada, sin anidar dentro de Form.Item, seguirá funcionando:
<Input id="inputUserName" value={getInputValue('inputUserName')} onFocus={() => setInputName('inputUserName')} placeholder="User Name" onChange={onChangeInput} />Agradezco mucho si alguien pudiera responder a esta estúpida pregunta, soy realmente nuevo y ni siquiera sé qué buscar para empezar, y realmente lo siento por mi pobre inglés, no sé cómo explicar o elaborar más.
Se corrigió siguiendo este ejemplo de código de ANTD.
Básicamente, agregué las siguientes líneas para llamar al método de formulario.
const [form] = Form.useForm(); Luego asignando los valores de entrada en el oyente onChangeAll en el componente del teclado de la siguiente manera:
const onChangeAll = (inputs) => { setInputs({ ...inputs }); form.setFieldsValue({ username: `${inputs.inputUserName}`, password: `${inputs.inputPassword}`, }); }; Además, no olvide agregar esta línea en el componente Form
<Form form={form} ... >