我创建了一个gutenberg块和一个具有一些类名的select控件。

选择控件位于侧栏中自己的面板中。

我的问题是当我尝试调用select控件值/大小时。我所得到的只是未定义的。

我哪里出错了？在编辑/保存块时，如何获取MySelectControls值并存储该值？

//  Import CSS.
import \'./style.scss\';
import \'./editor.scss\';

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText, InspectorControls } = wp.editor;
const { Fragment } = wp.element;
const { Panel, PanelBody, PanelRow, SelectControl } = wp.components;
const { createHigherOrderComponent, withState } = wp.compose;
const { createHooks, addFilter, removeFilter, applyFilters  } = wp.hooks;



// Create my select control
const MySelectControl = withState( {
    size: \'display-2\',
} )( ( { size, setState } ) => (
    <SelectControl
    label="Size"
    value={ size }
    options={ [
        { label: \'Display-1\', value: \'display-1\' },
        { label: \'Display-2\', value: \'display-2\' },
        { label: \'Display-3\', value: \'display-3\' },
        { label: \'Display-4\', value: \'display-4\' },
    ] }
    onChange={ ( size ) => { setState( { size }  ) } }
    />
) );

//Block Options - Render it in a panel
const withInspectorControls =  createHigherOrderComponent( ( BlockEdit ) => {

    return (props) => {
        return (


            <Fragment>
            <BlockEdit { ...props } />
            <InspectorControls>

            <PanelBody
            title="My Block Settings"
            icon="welcome-widgets-menus"
            initialOpen={ true }
            >
            <PanelRow>

            <MySelectControl  /> // get this value

            </PanelRow>
            </PanelBody>




            </InspectorControls>

            </Fragment>
        );
    };
}, "withInspectorControl" );

wp.hooks.addFilter( \'editor.BlockEdit\', \'cgb/block-display-heading\', withInspectorControls );





function handleSize(){

    return MySelectControl.size; // get the value

}


const sizeH = handleSize(); // store the value

registerBlockType( \'cgb/block-display-heading\', {

    title: __( \'display-heading - CGB Block\' ),
    icon: \'shield\',
    category: \'common\',
    keywords: [
        __( \'Display Heading\' ),
        __( \'CGB Example\' ),
        __( \'create-guten-block\' ),
    ],
    attributes: {
        content: {
            type: \'array\',
            source: \'children\',
            selector: \'h1\',
        }
    },



    edit: function( props ) {

        console.log(sizeH);

        const { attributes: { content }, setAttributes, className, size } = props;

        const onChangeContent = ( newContent ) => {
            setAttributes( { content: newContent } );

        };

        return (

            <div class="display_wrapper">
            <RichText
            tagName="h1"
            className={ className + \' \' + sizeH } // display the value here
            onChange={ onChangeContent }
            value={ content }
            placeholder="Enter text..."
            />
            </div>
        );
    },

    save: function( props ) {

        return (
            <div class="display_wrapper">
            <RichText.Content tagName="h1" className={`testing ` + sizeH } value={ props.attributes.content } /> // and here!
            </div>
        );
    },
} );