我试图通过Rich Text函数输入文本,但光标自动离开RichText.我已经导入了需要它的基本组件,我也试过用onKeyUp代替onChange,但也不行。我也试过用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>
)
},
});
我不知道为什么会发生这样的情况,但是在我自己的努力下,我发现,做相当于 { ArticleContent( { attributes: attributes } ) }
而非 <ArticleContent attributes={ attribbutes }/>
解决了这个问题。
实际的区别是 RichText
实际上并没有被一个组件包装,但为什么这有任何区别,即使在我浏览了大约一个小时的古腾堡代码之后,我也不明白。