我正在创建一个块并使用富文本保存一些文本这是我的编辑功能。
edit: (props) => {
const { attributes: { content, backgroundImage }, setAttributes } = props;
const onImageSelect = (imageObject) => {
setAttributes({ backgroundImage: imageObject.sizes.full.url });
}
const onChangeContent = (newContent) => {
setAttributes({ content: newContent });
};
console.log(content);
return (
<div className={props.className}>
<MediaUpload
onSelect={onImageSelect}
type="image"
value={backgroundImage}
render={({ open }) => (
<button onClick={open}>
Upload Image!
</button>
)}
/>
<img src={backgroundImage} alt="eherh" />
<div className={\'caption\'}>
<RichText
tagName={"p"}
className={\'imgCtaContent\'}
onChange={onChangeContent}
value={content}
placeholder="Enter text..."
/>
</div>
</div>
);
},
这是我的保存功能:-
save: (props) => {
return (
<div className={props.className}>
<RichText.Content tagName={"p"} value={props.attributes.content} />
</div>
);
},
当我在编辑块时,我可以看到当我在块中键入时控制台。日志(内容)显示内容,但当我保存页面时,不会保存文本。
我哪里做错了?
SO网友:WebElaine
有两件事需要尝试-删除一些大括号{},因为只有在引用变量时才需要这些大括号,并尝试直接调用onChange:
<div className={\'caption\'}>
<RichText
tagName="p"
className=\'imgCtaContent\'
onChange={ ( content ) => { setAttributes( { content } ) } }
value={content}
placeholder="Enter text..."
/>
</div>
也在
save()
, 在RichText上设置值。内容不是必需的,可能会让人困惑。仅使用
return (
<div className={props.className}>
<RichText.Content />
</div>
);