reactjs - Gutenberg 块在选择元素时显示某些内容

Question

我正在构建一个 Gutenberg 块，并尝试在选择元素时显示输入。

    <RichText
        tagName="a"
        className="button"
        placeholder={ __( 'Text...' ) }
        keepPlaceholderOnFocus={ true }
        value={ text }
        onChange={ ( value ) => setAttributes( { text: value } ) }
    />                      
   { isSelected && (

        <form
            className="inline-input"
            onSubmit={ ( event ) => event.preventDefault() }>
            <URLInput
            value={ URL }
            onChange={ ( value ) => setAttributes( { URL: value } ) }
         />
        </form>
  ) }

When the element with class name "button" is selected the form should show. 相反，表格从一开始就显示。我使用 isSelected 错误吗？

Answer 1

我还在为 Gutenberg/Block Editor 学习 REACT。但我设法为此想出了一个解决方法。

您需要对元素使用IF条件（简写）。您可以使用 classNamehidden来显示/隐藏元素。

 <form
        className={ !your_attribute ? "hidden" : "inline-input" }
        onSubmit={ ( event ) => event.preventDefault() }>
        <URLInput
        value={ URL }
        onChange={ ( value ) => setAttributes( { URL: value } ) }
     />
    </form>

isSelected如果用户单击了块以使其“活动”，则使用。在这种情况下，您也可以使用状态。我只是发现如果用户选择了按钮然后保存他们的帖子/页面，这将保持表单显示。

如前所述，我仍在学习 REACT + Gutenberg/Block Editor。我希望这有帮助。