wordpress 如何从FormTokenField组件 gutenberg 块中只返回id

afdcj2ne  于 2023-01-25  发布在  WordPress
关注(0)|答案(1)|浏览(96)

我在开发 gutenberg 块的过程中遇到了一个挑战,即使查看文档也无法解决,因此我有一个名为options的数组列表,我想通过FormTokenField组件向用户显示title以选择类别,并在后端为我返回所选的id以进行posts循环查询和其他操作...

options = [
                {
                    "id": 57,
                    "title": "Accessories"
                },
                {
                    "id": 54,
                    "title": "Clothing"
                },
                {
                    "id": 59,
                    "title": "Decor"
                },
                {
                    "id": 56,
                    "title": "Hoodies"
                },
                {
                    "id": 58,
                    "title": "Music"
                }
            ]

const MyFormTokenField = withState({
})(() => (
    <FormTokenField
        value={productCats}
        placeholder="Enter at least two letters"
        label={__('select categories', 'fortest')}
        suggestions={options}
        onChange={(value) =>
            setAttributes({ productCats: value })
        }
        __experimentalExpandOnFocus="true"
        __experimentalShowHowTo={false}
    />
));

我期望id列表返回给我,但是title从FormTokenField的输出返回给我,但是我需要所选项目的id用于查询和...

qqrboqgw

qqrboqgw1#

你可以试试这个:

const suggestions = options.map(option => option.id);

const MyFormTokenField = withState({
})(() => (
    <FormTokenField
        value={productCats}
        placeholder="Enter at least two letters"
        label={__('select categories', 'fortest')}
        suggestions={suggestions}
        onChange={(value) =>
            setAttributes({ productCats: value })
        }
        __experimentalExpandOnFocus="true"
        __experimentalShowHowTo={false}
    />
));

您将获得所选项目的id,并且可以使用该id来查询帖子或其他相关操作,还可以使用FormTokenField组件的值属性来存储所选id。

相关问题