如何根据我在 React js 中选择的属性添加动态字段？

Question

我正在尝试根据我的 selected 属性创建动态字段。我有 2 个数组对象 addAttributes 和 fakeAttributes。 fakeAttributes 是 selected 属性的详细信息。我有一个下拉 select 组件，如果我传递 addAttributes 它将显示数据。如果我 select 来自我的 select 组件的任何选项，它将存储到 setAttributes 状态。

直播：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 },
        ]
    }
    ]

下拉菜单 UI。我正在为下拉菜单使用 npm i react-select 包。这是我的代码，如果值与标签匹配，我将尝试过滤和映射这些数组对象，它将创建动态字段，但输出未显示，我也没有收到任何错误。假设我有 selected colors 属性，它将创建动态文件，其名称应为 'color' 和值。此外，如果我 select 两者都会创建 2 个动态字段及其值（颜色、大小、）。


<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>

cany可以帮帮我吗？我该如何解决？

Answer 1

这可能是实现呈现新 select 下拉框的一种可能解决方案：

代码示例:

            <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>
              ))
            }

Codesandbox 预览图/截图:

如何根据我在 React js 中选择的属性添加动态字段？

How can I add dynamic fields based on my selected attributes in react js?

javascript

arrays

typescript

reactjs

react-select