在选中时显示 div 为 true,自定义古腾堡块
每当用户使用复选框类型检查输入时,我都会显示一个 div 的线索。
为了查看我正在等待的行为,我向您分享了显示屏的屏幕截图。
如您所见,我想显示一个 div,可以在输入中添加链接。
这是相关的代码:
const {registerBlockType} = wp.blocks
const {InspectorControls, InnerBlocks} = wp.editor
const {RichText} = wp.blockEditor
import { useState } from '@wordpress/element';
registerBlockType('astra/listedosage', {
title: 'Liste dosage ingrédients',
category: 'widgets',
icon: 'smiley',
attributes: {
Ingname: {type: "string"},
Qtt: {type: "string"},
},
edit: function(props) {
const ALLOWED_BLOCKS = ['astra/listedosage'];
const [checked, setChecked] = useState(false);
const handleChange = () => {
// Change state to the opposite (to ture) when checkbox changes
setChecked(!checked);
};
function updateIngname(e){
props.setAttributes({Ingname : e.target.value})
}
function updateQtt(e){
props.setAttributes({Qtt : e.target.value})
}
function updateLink(e){
props.setAttributes({Link : e.target.value})
}
return (
<div className="blocListeDosage">
<div className="blocListeDosageIngName">
<input type="text" autocomplete="off" placeholder="Nom de l'ingrédient" onChange={updateIngname} value={props.attributes.Ingname} />
</div>
<div className="blocListeDosageLink">
<div>Lien ?</div>
<input type="checkbox" checked={checked} onChange={handleChange}/>
</div>
<div className="blocListeDosageIngQtt">
<input type="text" autocomplete="off" placeholder="Quantité" onChange={updateQtt} value={props.attributes.Qtt} />
</div>
{ checked && (
<div className="blocListeDosageLinkHover">
<input type="text" autocomplete="off" placeholder="Lien vers le produit" onChange={updateLink} value={props.attributes.Link} />
</div>
)}
</div>
)
},
save: function (props) {
return (
<div className="blocListeDosage">
</div>
)
}
})
I a clue to show a div whenever the user check an input with the type of checkbox.
To see the behavior i'm waiting for, i share you a screenshot of what the display looks like.
So as you can see i want to show a div with the possibility to add a link in an input.
Here is the associated code :
const {registerBlockType} = wp.blocks
const {InspectorControls, InnerBlocks} = wp.editor
const {RichText} = wp.blockEditor
import { useState } from '@wordpress/element';
registerBlockType('astra/listedosage', {
title: 'Liste dosage ingrédients',
category: 'widgets',
icon: 'smiley',
attributes: {
Ingname: {type: "string"},
Qtt: {type: "string"},
},
edit: function(props) {
const ALLOWED_BLOCKS = ['astra/listedosage'];
const [checked, setChecked] = useState(false);
const handleChange = () => {
// Change state to the opposite (to ture) when checkbox changes
setChecked(!checked);
};
function updateIngname(e){
props.setAttributes({Ingname : e.target.value})
}
function updateQtt(e){
props.setAttributes({Qtt : e.target.value})
}
function updateLink(e){
props.setAttributes({Link : e.target.value})
}
return (
<div className="blocListeDosage">
<div className="blocListeDosageIngName">
<input type="text" autocomplete="off" placeholder="Nom de l'ingrédient" onChange={updateIngname} value={props.attributes.Ingname} />
</div>
<div className="blocListeDosageLink">
<div>Lien ?</div>
<input type="checkbox" checked={checked} onChange={handleChange}/>
</div>
<div className="blocListeDosageIngQtt">
<input type="text" autocomplete="off" placeholder="Quantité" onChange={updateQtt} value={props.attributes.Qtt} />
</div>
{ checked && (
<div className="blocListeDosageLinkHover">
<input type="text" autocomplete="off" placeholder="Lien vers le produit" onChange={updateLink} value={props.attributes.Link} />
</div>
)}
</div>
)
},
save: function (props) {
return (
<div className="blocListeDosage">
</div>
)
}
})
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

对于在开发古腾堡块时遇到我的问题的人:
使用 CSS input:checked 和 ~ 标签,我无法使用reactJS做到这一点,我一直在尝试的每件事都没有成功,因为我从来没有答案。
CSS 在这里:
For people that will have my problem in their development of Gutenberg block :
Use CSS input:checked and ~ tag, i wasn't able to do it with reactJS, every thing i've been trying wasn't a success since i never had an answer.
CSS is here: