0
167
VistasRecursividad en el componente de reacción que genera un formulario.
¡Hola SO!
Actualmente estoy tratando de crear un formulario que se genere en función del objeto proporcionado y parece funcionar en casi cualquier cosa que le lance.
Es decir, hasta que llego a un objeto anidado.
El problema:
Una vez que presiono la condición if (typeof value === "object") , quiero tener una entrada oculta (esto funciona).
Luego quiero entrar en ese objeto que acabo de identificar, y en todos los objetos secundarios que pueda contener y generar la entrada con los mismos criterios que la ejecución inicial.
function GenericForm(props: any) { var object = props.object; return ( <div> <form> {Object.entries(object).map(([property, value]) => { let type: string = ""; if (typeof value === "string") { type = "text"; } else if (typeof value === "number") { type = "number"; } else if (typeof value === "boolean") { type = "checkbox"; } else if (value instanceof Date) { type = "date"; } else if (typeof value === "object") { type = "hidden"; } return [ <label property={property} htmlFor={property}> {property} </label>, <input type={type} id={property} name={property} defaultValue={value as string} onChange={(newVal) => { object[property] = newVal.target.value; }} />, ]; })} </form> </div> ); } export default GenericForm; Soy consciente de que lo más probable es que utilice algún tipo de recursividad y, aunque he intentado resolverlo usando la recursión, no he podido resolverlo.
el código pegado aquí es de antes de que intentara la recursividad, para tener una "hoja en blanco" de donde salió mal para mí.
EDITAR 1: información agregada sobre la estructura del objeto
el objeto pasado debe ser completamente genérico y permitir que los objetos de cualquier estructura se entreguen al componente; actualmente, solo debe evaluar de qué tipo son las propiedades y crear un elemento de entrada a partir de eso.
uno de los objetos actuales que estoy pasando tiene el siguiente esquema JSON
{ "id": "XYZ1", "type": "twilio-api", "sid": "someSID", "from": "+phonenumberhere", "name": "TWILIO SMS", "credentials": { "token": "someapitoken" } }el objeto anterior actualmente se representa así:
1 Respuestas
Responde la pregunta0
Suponiendo que tiene un componente de Input :
function Input = ({ name, type, value }) => { // most of your code can fit here return <input name={name} type={type} value={value} /> } Puede usar su versión de código, yo uso una versión simplificada como la anterior para facilitar nuestra discusión. Con eso podemos diseñar un componente InputList :
function InputList = ({ object }) => { console.log('list', object) return ( <div> {Object.entries(object).map(([property, value]) => { if (typeof value === "object") { return <InputList object={value} /> } else { return <Input name={property} /> } })} </div> ) } Puede ver dentro de esta InputList , hay una llamada a InputList nuevamente, por lo que esa es la recursividad que está buscando. La recursividad se detiene cuando ya no tienes un objeto dentro de un objeto.
NOTA: React requiere value y onChange para controlar cualquier cuadro de input . De lo contrario, simplemente se comportarán como una entrada nativa. Pero esto no es parte de esta pregunta.