在选中时显示 div 为 true,自定义古腾堡块

发布于 01-15 17:31 字数 2607 浏览 1 评论 0原文

每当用户使用复选框类型检查输入时,我都会显示一个 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.

Gutenberg view

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

雪花飘飘的天空2025-01-22 17:31:20

对于在开发古腾堡块时遇到我的问题的人:
使用 CSS input:checked 和 ~ 标签,我无法使用reactJS做到这一点,我一直在尝试的每件事都没有成功,因为我从来没有答案。

edit: function(props) {
        const ALLOWED_BLOCKS = ['astra/listedosage'];

        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"/>
                       <div className="blocListeDosageLinkHover">
                            <input type="text" autocomplete="off" placeholder="Lien vers le produit"  onChange={updateLink} value={props.attributes.Link} />
                       </div>
                   </div>

                   <div className="blocListeDosageIngQtt">
                       <input type="text" autocomplete="off" placeholder="Quantité" onChange={updateQtt} value={props.attributes.Qtt} />
                   </div> 
                   
            </div>
        )
    }

CSS 在这里:

input:checked + .blocListeDosageLinkHover{
    display: block!important;
}

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.

edit: function(props) {
        const ALLOWED_BLOCKS = ['astra/listedosage'];

        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"/>
                       <div className="blocListeDosageLinkHover">
                            <input type="text" autocomplete="off" placeholder="Lien vers le produit"  onChange={updateLink} value={props.attributes.Link} />
                       </div>
                   </div>

                   <div className="blocListeDosageIngQtt">
                       <input type="text" autocomplete="off" placeholder="Quantité" onChange={updateQtt} value={props.attributes.Qtt} />
                   </div> 
                   
            </div>
        )
    }

CSS is here:

input:checked + .blocListeDosageLinkHover{
    display: block!important;
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文