当选择元素时，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>
  ) }

当选择具有类名“按钮”的元素时，应该显示表单。相反，表单从一开始就显示出来。我使用isSelected错了吗？

Answer 1

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

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

 <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。我希望这有帮助。