保存函数中的Gutenberg Get with State变量

时间:2020-07-07 作者:jsjqueryreact

我不太熟悉React和Redux。我对Gutenberg在save函数中获取withState变量的值有问题。这是我的代码:

edit( {attributes, setAttributes, className} ) {

    var link_text = attributes.link_text;
    var link_url = attributes.link_url;
    var svg_url = attributes.svg_url;
    var template_url = ww_blocks.templateUrl;
    var hasExternalURL = attributes.hasExternalURL;

    function onChangeLinkText ( content ) {
        setAttributes({link_text: content})
    }

    function onChangeLinkURL ( content ) {
        setAttributes({link_url: content})
    }

    setAttributes({svg_url: template_url + \'/img/icons.svg#button-next\'});

    const LinkToggleControl = withState( {
                hasExternalURL: false,
    } )( ( { hasExternalURL, setState } ) => (
        <ToggleControl
            label="Externer Link"
            help={ hasExternalURL ? \'Es ist ein externer Link.\' : \'Kein externer Link.\' }
            checked={ hasExternalURL }
            onChange={ () => setState( ( state ) => ( { hasExternalURL: ! state.hasExternalURL } ) ) }
        />
    ) );

        return ([
        <InspectorControls>
          <PanelBody title="Link Parameter">
            <div id="ww-container-inspector-control-wrapper">
              <label class="blocks-base-control__label" for="mce_1">Link Text</label>
              <TextControl
                onChange={onChangeLinkText} // onChange event callback
                value={link_text} // Input Binding
                />
              <label class="blocks-base-control__label" for="mce_2">Link URL</label>
              <TextControl
                onChange={onChangeLinkURL} // onChange event callback
                value={link_url} // Input Binding
                />
              <LinkToggleControl />
            </div>
          </PanelBody>
        </InspectorControls>,
        <div className={ className }>
          <a class="btn btn-std" href="#">
            <svg role="img" class="symbol" aria-hidden="true" focusable="false">
              <use href={svg_url}></use>
            </svg>
            <span>{link_text}</span>
          </a>
        </div>
    ]);
    },

    save( { attributes } ) {

        return (
        <a className="btn btn-std" href={attributes.link_url} target={ attributes.hasExternalURL ? \'_blank\' : \'\' } title={ attributes.hasExternalURL ? \'Seite öffnet in neuem Fenster\' : \'\' }>
          <svg role="img" class="symbol" aria-hidden="true" focusable="false">
            <use href={attributes.svg_url}></use>
          </svg>
          <span>{attributes.link_text}</span>
        </a>
        );
    },
} );

1 个回复
最合适的回答,由SO网友:Tom J Nowell 整理而成

块不是这样工作的。如果你想保存一些东西,it must be a block attribute.

withState 允许函数具有内部状态,因此如果要将切换控件添加到块UI中,这很有用,但不应使用它存储需要保存的内容。因此,您可以使用它来帮助构建块的UI,保存临时内容,以及任何不需要解决且可以消除的内容。E、 g.面板是否打开或折叠。

此外,如果我们忽略这一点,并尝试使用withState 我们遇到了几个问题:

save函数中的状态将不相同,因此该值不会保留HTML中的信息,但由于它不是块属性,因此不会保存,下次打开编辑器时,它将消失,需要重置,或者HTML将更改withState 用于React组件内部,但save 方法用于生成要放入数据库的最终HTMLLinkToggleControl 正在使用本地临时状态存储是否已切换,何时应使用setAttributes 相反

相关推荐