将selectControl值传递给组件

Question

我创建了一个选择控件，该控件将允许我更改组件中文本的类。

我的选择控件的默认值为“ display-2”。我添加了console.log，可以看到它被触发并被更改。

但是，当我单击远离组件时，它会更改回默认值，并且不会保存。

我认为我必须将选择控制值传递给编辑/保存功能，以便正确更改和保存该值。我是刚起步的新人，我对古腾堡的开发和开发都充满了反应。

/**
* BLOCK: display-heading
*
* Registering a basic block with Gutenberg.
* Simple block, renders and saves the same content without any interactivity.
*/

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


const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
const { RichText } = wp.editor;
const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.element;
const { InspectorControls } = wp.editor;
const { Panel, PanelBody, PanelRow  } = wp.components;
const { withState } = wp.compose;
const { SelectControl } = wp.components;
const { createHooks } = wp.hooks;



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 }, console.log(size + ' from func')  ) } }
    />
) );


// Block Options
const withInspectorControls =  createHigherOrderComponent( ( BlockEdit ) => {
    return (props) => {
        return (
            <Fragment>
            <BlockEdit { ...props } />
            <InspectorControls>
            <PanelBody title="Display Block Settings"
            initialOpen={ false }
            >

            <MySelectControl />

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

wp.hooks.addFilter( 'editor.BlockEdit', 'display-heading/with-inspector-controls', withInspectorControls );





/**
* Register: aa Gutenberg Block.
*
* Registers a new block provided a unique name and an object defining its
* behavior. Once registered, the block is made editor as an option to any
* editor interface where blocks are implemented.
*
* @link https://wordpress.org/gutenberg/handbook/block-api/
* @param  {string}   name     Block name.
* @param  {Object}   settings Block settings.
* @return {?WPBlock}          The block, if it has been successfully
*                             registered; otherwise `undefined`.
*/
registerBlockType( 'cgb/block-display-heading', {
    // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
    title: __( 'display-heading - CGB Block' ), // Block title.
    icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
    category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
    keywords: [
        __( 'Display Heading' ),
        __( 'CGB Example' ),
        __( 'create-guten-block' ),
    ],
    attributes: {

        content: {
            type: 'array',
            source: 'children',
            selector: 'h1',
        },
    },
    /**
    * The edit function describes the structure of your block in the context of the editor.
    * This represents what the editor will render when the block is used.
    *
    * The "edit" property must be a valid function.
    *
    * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
    */

    edit: function( props ) {


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




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

        const onChangeSize = ( newSize ) => {
            setAttributes( { size: newSize } );
        };

        return (

            <div class="display_wrapper">
            <RichText
            tagName="h1"
            className={ className }
            onChange={ onChangeContent }
            value={ content }
            placeholder="Enter text..."
            />
            </div>
        );
    },

    /**
    * The save function defines the way in which the different attributes should be combined
    * into the final markup, which is then serialized by Gutenberg into post_content.
    *
    * The "save" property must be specified and must be a valid function.
    *
    * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
    */
    save: function( props ) {
        return (
            <div class="display_wrapper">
            <RichText.Content tagName="h1"  value={ props.attributes.content } />
            </div>
        );
    },
} );

我试图添加一个获取selectcontrols值的函数，但是没有，我也不知道出了什么问题。