无法在URLInputButtonGutenberg中输入文本

问题描述

我正在使用古腾堡（Gutenberg）中的URLInputButton组件，但是即使我将软件包github上的文档放在T上，也无法使它接受任何文本（键入时什么也没有发生）。

出于记录目的，URLInput本身可以很好地工作，但是由按钮引入的URLInput出于任何原因都不会。

const { InnerBlocks,URLInputButton,URLInput } = wp.blockEditor;
const { Component,Fragment } = wp.element;
const { __ } = wp.i18n;

const TemplateImg = [
    [ 'core/image' ],[ 'core/heading' ],[ 'core/paragraph' ],];

class EditLinkImage extends Component {
    constructor() {
        super(...arguments);
        this.render = this.render.bind(this);   
    }

    render() {
        const {
            className,attributes: { btnUrl,btnText },setAttributes
        } = this.props;

        const onSelectURL = ( url,post ) => {
            setAttributes( {
                btnUrl: url,btnText: (post && post.title) || 'Click here'
            } );
        };
        return (
            <Fragment>
                <label>Choose a Link</label>
                <URLInputButton
                    onChange={ onSelectURL }
                    value='asdfasd'
                />
                <div className="feat-link">
                    <InnerBlocks 
                        template={TemplateImg}
                        templateLock="all"
                    />
                </div>
            </Fragment>
        );
    }
}

export default EditLinkImage;```

解决方法

找到了答案！与URLInput组件不同，URLInputButton应该具有'url'属性，而不是'value'。

,

您必须将value的{​​{1}}属性设置为URLInputButton。如果您想了解更多信息，请阅读React Form Documentation。