Фильтрация элементов SelectControl в соответствии с входом из другого SelectControl в блоке Гутенберга (ES5, нет JSX) - PullRequest
Новая
       41

Фильтрация элементов SelectControl в соответствии с входом из другого SelectControl в блоке Гутенберга (ES5, нет JSX)

1 голос
/ 25 апреля 2020

У меня есть 2 SelectControl из пользовательского блока Wordpress Gutenberg, который я пытаюсь построить. Я не использую ES6. Только ES5 и нет JSX. 2 SelectControl должен работать следующим образом:

Они получают из REST WP Api типы сообщений и все сообщения. Чего я хочу добиться, так это когда я выбираю элемент из SelectControl 1 (Типы сообщений), я получаю соответствующие отфильтрованные сообщения в SelectControl 2. Все сообщения и типы сообщений предварительно загружаются в массив при загрузке страницы. Я могу с помощью приведенного ниже кода успешно заполнить оба элемента управления REST Api, но когда дело доходит до фильтрации второго элемента selectcontrol в соответствии с выбранным значением из первого элемента управления, он не работает. Нет ошибок. 

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

1 Ответ

0 голосов
/ 27 апреля 2020

Я забыл, что WordPress не на 100% реагируют. Поэтому мне пришлось использовать метод setAttributes в методе onChange. Похоже, setAttributes похож на setState в React и заставляет плагин изменить интерфейс sh и перезагрузить мой TestControl. Когда TestControl перезагружается, мой optionsfiltered.filter работает и массив фильтруется в соответствии с выбором.

...