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 编辑器学习 REACT。但是我设法想出了一个解决方法。

您需要对元素 (shorthand) 使用 IF 条件。您可以使用 className hidden 来 show/hide 一个元素。

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

如果用户单击块使其成为 "active"，则使用 isSelected。在这种情况下，您也可以使用状态。我只是发现如果用户选择按钮然后保存他们的 post/page.

，这将保持表单显示

如前所述，我仍在学习 REACT + Gutenberg/Block 编辑器。希望对您有所帮助。

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

Gutenberg block show something when element is selected

jsx

reactjs

wordpress-gutenberg

gutenberg-blocks