根据 Gutenberg Block（ES5，无 JSX）中另一个 SelectControl 的输入过滤 SelectControl 项

Question

我有 2 个来自我正在尝试构建的 Wordpress Gutenberg 自定义块的 SelectControl。我不使用 ES6。只有 ES5 而没有 JSX。 2 SelectControl 应按以下方式工作：

他们从 REST WP Api 获取 Post 类型和所有 Post。我想要实现的是当我 select 来自 SelectControl 1 (Post Types) 的项目时，我在 SelectControl 2 中得到相关的过滤 Posts。所有 posts post 类型在页面加载时预加载到数组中。我能够使用下面的代码成功地使用 REST Api 填充两个控件，但是当涉及到根据第一个控件的 selected 值过滤第二个 select 控件时，它没有工作。没有错误。

onChange: function(value) {
    selectedType = value;
}

上面的代码对排序没有任何影响。也没有错误。无法弄清楚这里出了什么问题

(function(wp) {
var registerBlockType = wp.blocks.registerBlockType;
var InspectorControls = wp.blockEditor.InspectorControls;
var PanelBody = wp.components.PanelBody;
var TextControl = wp.components.TextControl;
var ColorPalette = wp.components.ColorPalette;
var SelectControl = wp.components.SelectControl;
var Dashicon = wp.components.Dashicon;
var el = wp.element.createElement;
var withState = wp.compose.withState;
var __ = wp.i18n.__;

var options = [{
    value: 0,
    label: __('Select a Post...')
}];
var optionsfiltered = null;
var selectedType = '';
var posttypeOptions = [{
    value: 0,
    label: __('Select a Post Type...')
}];

wp.apiFetch({
    path: '/custom/v1/all-posts'
}).then(function(posts) {
    var optionsAppend = posts.map(function(post) {
        return {
            value: post.id,
            label: post.title,
            type: post.type
        }
    });
    options = options.concat(optionsAppend);
    optionsfiltered = options;
});

wp.apiFetch({
    path: '/wp/v2/types'
}).then(function(posttypes) {
    console.log(posttypes);
    for (let [key, item] of Object.entries(posttypes)) {
        posttypeOptions.push({
            value: item.slug,
            label: item.name
        });
    }
});

function TestControl(props) {
    var attributes = props.attributes;
    var setAttributes = props.setAttributes;
    var setState = props.setState;

    var inspectorControl = el(InspectorControls, {},
        el('h4', {}, el('span', {}, "Select Value")),
        el(SelectControl, {
            label: "Select a Post Type",
            value: attributes.selectedPost,
            options: posttypeOptions,
            style: {
                fontSize: '10px'
            },
            onChange: function(value) {
                selectedType = value;
            }
        }),
        el(SelectControl, {
            label: "Select a Post",
            value: attributes.selectedPost,
            options: optionsfiltered.filter(function(el) {
                return el.type === selectedType;
            }),
            style: {
                fontSize: '10px'
            },
            onChange: function(value) {
                setAttributes({
                    url: value
                });
            }
        })
    );
    return el('div', {
            style: {
                backgroundColor: attributes.color,
                color: "#00ff00"
            }
        },
        inspectorControl
    );
}
registerBlockType('resorcedomain/resource-cards-block', {
    title: __('Resource Cards'),
    category: 'widgets',
    icon: {
        foreground: '#46aaf8',
        src: 'store'
    },
    attributes: {
        posts: {
            type: 'string',
            default: null
        },
        orders: {
            type: 'string',
            default: null
        },
        tagfilter: {
            type: 'string',
            default: null
        }
    },
    edit: withState({})(TestControl),
    save: function(props) {
        return null;
    }
});
})(window.wp);

Answer 1

我忘了 wordpress 不是 100% 反应的。所以我不得不在 onChange 方法中使用 setAttributes 方法。看起来 setAttributes 类似于 React 中的 setState 并使插件 UI 刷新并重新加载我的 TestControl。当 TestControl 重新加载时，我的 optionsfiltered.filter 工作并且数组根据选择进行过滤。

根据 Gutenberg Block（ES5，无 JSX）中另一个 SelectControl 的输入过滤 SelectControl 项

Filtering SelectControl items according the input from another SelectControl in Gutenberg Block (ES5, no JSX)

wordpress

wordpress-gutenberg

gutenberg-blocks