选中时显示 div 为真，自定义古腾堡块

Question

每当用户检查带有复选框类型的输入时，我都会显示 div。

要查看我正在等待的行为，我与您分享了显示内容的屏幕截图。

正如您所看到的，我想显示一个 div 并可以在输入中添加一个 link。

这是相关代码：

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>
        )
    }
})

Answer 1

对于在开发古腾堡区块时遇到我的问题的人：使用 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;
}

选中时显示 div 为真，自定义古腾堡块

Show a div while checked is on true, Custom Gutenberg Block

reactjs

wordpress

jsx

gutenberg-blocks

wp-editor