WordPress Gutenberg-带ESNext的块(带状态、带选择)

我是WordPress的ReactJS开发古腾堡积木的新手。

目前，我正在开发一个包含我自定义帖子类型的所有条目的块。条目应在块中显示为选择框。

但我在保存所选值时遇到了一些问题。保存并重新加载页面后，选择框显示“选择选项…”再一次

索引中的我的代码。js文件：

import {registerBlockType} from \'@wordpress/blocks\';
import {withSelect} from \'@wordpress/data\';
import {SelectControl} from "@wordpress/components";
import {withState} from \'@wordpress/compose\';

const MySelectControl = withState({
    chart: "0",
})
(
    ({chart, setState, ...props}) => (
        <SelectControl
            label="Bitte wählen Sie ein Diagramm aus: "
            value={chart}
            options={props.options}
            onChange={(chart) => {
                setState({chart});
            }}
        />
    )
);

registerBlockType(\'my_chart/charts\', {
    title: \'Diagramm\',
    icon: \'chart-bar\',
    category: \'widgets\',
    attributes: {
        chart: {
            type: \'number\'
        }
    },
    edit: withSelect((select) => {
        const query = {per_page: -1};
        return {
            posts: select(\'core\').getEntityRecords(\'postType\', \'my_charts\', query),
        };
    })
    (
        ({posts, attributes, setAttributes}) => {
            if (!posts) {
                return \'Loading charts...\';
            }
            if (posts && posts.length === 0) {
                return \'No charts found\';
            }
            let options = [];

            // if posts found
            if (posts) {
                options.push({
                    value: 0,
                    label: \'Select an option...\'
                });
                posts.forEach((post) => {
                    options.push(
                        {
                            value: post.id,
                            label: post.title.rendered
                        });
                });
            } else {
                options.push({
                    value: 0,
                    label: \'Loading charts...\'
                });
            }
            return (<MySelectControl options={options}/>);
        }
    ),
    save: function (props) {
        return null;
    },
});

有人知道这里出了什么问题吗？我不确定是否使用了正确的方式来显示自定义帖子类型的条目选择框。我认为问题是：

const MySelectControl = withState({
    chart: "0",
})

我每次都将该值设置为“0”。但如何将已选择的值传递给它？

如果你需要更多的信息，请告诉我。

谢谢Thorsten

import {withSelect} from \'@wordpress/data\'; import {SelectControl} from "@wordpress/components"; import ReactSpinner from \'react-bootstrap-spinner\' import ServerSideRender from \'@wordpress/server-side-render\'; const MySelectControl = ( ({chart, setAttributes, ...props}) => ( <SelectControl label="Bitte wählen Sie ein Diagramm aus: " value={chart ? parseInt(chart) : 0} options={props.options} onChange={(chart) => { setAttributes({ chart: chart }); }} /> ) ); registerBlockType(\'my_chart/charts\', { title: \'Diagramm\', icon: \'chart-bar\', category: \'widgets\', attributes: { chart: { type: \'string\' } }, edit: withSelect((select) => { const query = {per_page: -1}; return { posts: select(\'core\').getEntityRecords(\'postType\', \'my_charts\', query), }; }) ( ({posts, setAttributes, className, attributes}) => { if (!posts) { return <p className={className}> <ReactSpinner type="border" size="2"> <span className="sr-only">Diagramme werden geladen...</span> </ReactSpinner> </p>; } if (posts && posts.length === 0) { return \'<p>Keine Diagramme gefunden</p>\'; } let options = []; // if posts found if (posts) { options.push({ value: 0, label: \'Bitte auswählen...\' }); posts.forEach((post) => { options.push( { value: post.id, label: post.title.rendered }); }); } return ( <div className={className}> <MySelectControl key={attributes.chart} setAttributes={setAttributes} options={options} chart={attributes.chart}/> <ServerSideRender block="my-charts-importer/charts" attributes={ attributes } /> </div> ); } ), save: function () { return null; }, });```

相关推荐