Фокус курсора Gutenberg RichText автоматически сбрасывается

Я пытаюсь ввести текст с помощью функции Rich Text. но курсор автоматически выходит за пределы RichText. Я уже ввожу необходимый компонент, который на нем нуждается. Я также пробовал использовать onKeyUp вместо onChange, но тоже не работал.

Он работает хорошо, когда я пробую его без функции ArticleContent, но не работает при попытке с этой функцией ArticleContent.

Смотрите фото, здесь мне нужно каждый раз нажимать на форматированный текст для каждого символа.

Ниже мои коды (не работает)

registerBlockType('vixmi-support/test', {
    title: __('Test Block'),
    icon : {
        src       : 'media-spreadsheet'
    },
    category   : 'vixmi',
    description: 'Sample desc',
    keywords   : [
        __( 'Single Article' ),
        __( 'Article' ),
    ],

    supports:{
        align : true,
        anchor: true
    },

    // custom attributes
    attributes:{
        title: {
            type    : 'string',
            source  : 'html',
            selector: 'h4',
        },
        articleLayout: {
            type   : 'string',
            default: 'left',
        }
    },


    edit: ( {attributes, setAttributes} ) => {
        const{
            title, content, buttonTitle, buttonLink, linkTarget, articleLayout
        } = attributes;

        function UpdateArticleTitle(newTitle){
            setAttributes( { title:newTitle } )
        }
        function UpdateActionLayout(event){
            setAttributes( { articleLayout:event.target.value } )
        }

        function ArticleContent(props){
            const{
                title
            } = props.attributes;
            return(
                <RichText
                    key         = "editablec"
                    tagName     = "h4"
                    placeholder = "Article title"
                    value       = { title }
                    onChange    = { UpdateArticleTitle } />
            )
        }

        return([
            <div className="sample">
                <ArticleContent attributes={ attributes }/>
            </div>
        ])
    },
    save: ( {attributes} ) => {
        const{
            title
        } = attributes;

        return(
            <div className="sample">
                <h4>{title}</h4>
            </div>
        )
    },

});

person Sila Khatun    schedule 23.02.2020    source источник


Ответы (1)


Я не совсем уверен, почему это происходит, но после того, как я сам с этим боролся, я обнаружил, что выполнение эквивалента { ArticleContent( { attributes: attributes } ) }, а не <ArticleContent attributes={ attribbutes }/> решает проблему.

Практическая разница в том, что RichText на самом деле не обернута компонентом, но почему это имеет значение, я не понимаю даже после просмотра кода Гутенберга в течение примерно часа.

person Stefan Fisk    schedule 16.06.2020