如何仅从 FormTokenField 组件 gutenberg 块返回 id

Question

我在开发古腾堡块时遇到了一个挑战，即使通过查看文档也无法解决，所以我有一个名为options的 arrays 列表，我想通过 FormTokenField 组件向用户显示 select 类别的title ，并在后端为我返回选定的id以进行帖子循环查询和其他...

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 的 output 返回给我的，但是我需要查询所选项目的id和...

Answer 1

你可以试试这个：

    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 组件的 value prop 来存储所选的 id。