清除该字段时重置<LinkControl/>数据

时间:2021-07-07 作者:Thad

我能够获得要保存的值,但现在我遇到了在从控件中删除数据时使值不稳定的问题。我已经按照Github文档中的建议尝试了onRemove函数here.

由于某种原因,我无法启动此函数,因此即使URL从控件中删除,它仍存储在状态。

任何帮助都将不胜感激!

import { __experimentalLinkControl as LinkControl } from \'@wordpress/block-editor\';

export default function Edit ( { attributes: { linkURL }, setAttributes } ) {

    const handleLinkChange = ( value ) => {

        setAttributes( {
            linkURL: value.url
        } );

    };
    
    // This function doesn\'t seem to be firing
    const handleLinkRemove = () => {

        console.log( \'remove link\' ); // This does not run on remove of the link

        setAttributes( {
            linkURL: null
        } );
    };

    return (

        <LinkControl
            onChange={ handleLinkChange }
            onRemove={ handleLinkRemove }
            value={ { url: linkURL } }                         
        />

    );

}
@汤姆非常感谢你的帮助。我是stackexchange的新手,所以我不知道在哪里添加下面的屏幕截图。

这里有更多的背景:我工作的公司正在从ACF过渡到块编辑器。我们的内容编辑器习惯于使用多功能链接组件,允许他们进行内部/外部链接以及PDF或YouTube模式弹出窗口的链接。我正在尝试用一个自定义组件重新创建它,我们可以在需要时将其放入块中。下面的屏幕截图显示了我试图实现的变化:

enter image description here

enter image description here

enter image description here

如果我们的一个内容编辑器向LinkControl添加了一个url,但决定使用PDF或YouTube链接,那么他们就无法真正从状态中删除url。当他们删除URL时,该字段将显示为空,但当他们再次保存帖子时,该LinkControl字段将重新填充状态为的数据。

也许我使用了错误的组件来实现这一点,但我喜欢编辑器能够从下拉列表中选择页面并控制新选项卡中的打开。

您提到,如果条件正确,则可以使用取消链接按钮,但我还不知道如何满足这些条件。我愿意接受任何建议。

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

这不是该组件的工作方式。

onRemove 当链接取消链接时,通过仅在满足某些条件时出现的按钮调用:

                { onRemove && value && ! isEditingLink && ! isCreatingPage && (
                    <Button
                        className="block-editor-link-control__unlink"
                        isDestructive
                        variant="link"
                        onClick={ onRemove }
                    >
                        { __( \'Unlink\' ) }
                    </Button>
                ) }

https://github.com/WordPress/gutenberg/blob/6eac4a26f143c7378c3b39b5a83271538f36dfa9/packages/block-editor/src/components/link-control/index.js#L270

onRemove 道具已给定,且值不为空,链接未被编辑,并且您当前未使用控件创建页面。

这不是为了擦除或重置链接的值,而是为了完全删除它。有可能<a href="">, 但是unlink 将完全移除锚点,因此您使用它没有意义。

相反,要捕获空白URL用例,您应该观察更改事件

相关推荐