He envuelto una etiqueta <textarea /> como un componente de reacción que se encuentra dentro de un Ant Design Form.Item así:
<Form.Item name="query" label="Query" > <CodeEditor /> </Form.Item>el problema es que cuando envío el formulario, el valor de "consulta" no está definido.
Si reemplazo <CodeEditor /> con el código de área de texto así:
<Form.Item name="query" label="Query" > <textarea /> </Form.Item>el valor de "consulta" está configurado correctamente.
¿Cómo se deben envolver las etiquetas de formulario en React para que sus accesorios/funciones nativos estén expuestos? Espero que los árbitros funcionen aquí, pero supongo que hay un mejor enfoque.
EDITAR
Ejemplo de CodeSandbox . Si ingresa algún texto en la entrada de CodeEditor y hace clic en el botón "Consulta de registro de la consola", se registrará "indefinido". Pero si reemplaza en la línea 22 con <textarea /> , se registrará el valor de la consulta.
En lugar de usar:
<Form.Item name="query" label="Query" > <textarea /> </Form.Item>Puede probar este componente importado de antd como se muestra a continuación:
import { Input } from 'antd'; const { TextArea } = Input; <Form.Item name="query" label="Query" > <TextArea /> </Form.Item>Si desea usar un componente personalizado como elemento secundario de Form.Item , debe proporcionarle value y accesorios onChange , porque Form.Item los usará para cambiar la Instancia de formulario.
En su caso, el código del componente CodeEditor se verá así:
function CodeEditor({ value, options, readOnly, onChange }) { const textRef = React.useRef(); return ( <Editor value={value} ref={textRef} language="sql" placeholder="Please enter SQL code." onChange={onChange} padding={15} style={{ backgroundColor: "#f5f5f5", fontFamily: "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace", fontSize: 16 }} /> ); }