0
226
Vistas¿Cómo puedo agregar campos dinámicos en función de mis atributos seleccionados en reaccionar js?
Estoy tratando de crear campos dinámicos basados en mis atributos seleccionados. Tengo 2 objetos de matriz addAttributes y fakeAttributes . fakeAttributes son los detalles de los atributos seleccionados. Tengo un componente de selección desplegable si paso addAttributes, mostrará los datos. Si selecciono cualquier opción de mi componente de selección, se almacenará en el estado setAttributes .
En vivo: https://codesandbox.io/s/dank-fog-1vue7?file=/src/AddProducts/AddProducts.js
const [attributes, setAttributes] = useState([{ label: '', value: 1 }]) const addAttributes = [ { label: 'colors', value: 1 }, { label: 'size', value: 2 }, ] // Attributes data const fakeAttributes = [{ label: 'colors', object: [ { label: 'Black', value: 1 }, { label: 'Green', value: 2 }, ] }, { label: 'size', object: [ { label: 'M', value: 1 }, { label: 'S', value: 2 }, ] } ] Interfaz de usuario desplegable. Estoy usando el paquete npm i react-select para el menú desplegable. 
Este es mi código donde estoy tratando de filtrar y mapear esos objetos de matriz si el valor coincide con la etiqueta, creará campos dinámicos pero la salida no se muestra y tampoco obtuve ningún error. Supongamos que he seleccionado el atributo de colores, creará un archivo dinámico cuyo nombre debe ser 'color' con los valores. Además, si selecciono ambos, creará 2 campos dinámicos con sus valores (colores, tamaño,).
<div className='flex flex-row gap-6'> <div className="basis-1/4"> <label className="block text-sm font-medium text-gray-700 mb-3"> Size </label> <Select options={addAttributes} onChange={(e: any) => setAttributes(e)} className="shadow appearance-none border rounded w-full text-gray-700 leading-tight focus:outline-none focus:shadow-outline" isMulti /> </div> { fakeAttributes.filter((attr) => { attributes.map((selectedAttr: any) => { if (selectedAttr.label === attr.label) { return (<div className="basis-1/4"> <label className="block text-sm font-medium text-gray-700 mb-3"> Color </label> <Select options={addAttributes} onChange={(e: any) => setAttributes(e)} className="shadow appearance-none border rounded w-full text-gray-700 leading-tight focus:outline-none focus:shadow-outline" isMulti /> </div>) } }) }) } </div>¿Puede ayudarme por favor? ¿Cómo puedo resolverlo?
1 Respuestas
Responde la pregunta0
Esta puede ser una posible solución para lograr renderizar los nuevos cuadros desplegables de select :
Ejemplo de código :
<div className="basis-2/4"> <label className="block text-sm font-medium text-gray-700 mb-3"> {" "} Choice{" "} </label> <Select onChange={(e) => setAttributes(e)} className="shadow appearance-none border rounded w-full text-gray-700 leading-tight focus:outline-none focus:shadow-outline" options={addAttributes} isMulti /> </div> { fakeAttributes .filter( f => attributes .map(a => a.label) .includes(f.label) ) .map(a => ( <div> <label>{a.label}</label> <Select options={a.object} onChange={e => console.log('do something with: ' + JSON.stringify(e))} /> </div> )) }Imagen/captura de pantalla de la vista previa de Codesandbox :
