如何使Microsoft Fabric UI <Callout />指向分配给它的按钮。特效

Question

我有一个带有按钮的组件，我已经设置了一个Microsoft Fabric UI标注，以在单击该按钮后显示。一切运行正常，但标注未指向按钮。 我实质上已经从MS网站复制了大部分代码，但是为了适应我的需要进行了更改。这是渲染器中的代码：

from cleantext import clean

text = "I am a sample text. 
I have -many- weird characters, such as , . # and some numbers,
4335 and 12 more. 
Here is a newline character \n and a $ sign. 
Some words are CAPITALIZED and this is an email address: hello@example.com"


clean(text,
        fix_unicode=True,               # fix various unicode errors
        lower=True,                     # lowercase text
        no_line_breaks=True,           # strip line breaks 
        no_emails=True,                # replace all email addresses with a special token
        no_numbers=True,               # replace all numbers with a special token
        no_digits=True,                # replace all digits with a special token
        no_currency_symbols=True,      # replace all currency symbols with a special token
        no_punct=True,                 # fully remove punctuation
        replace_with_email="",
        replace_with_number="",
        replace_with_digit="",
        replace_with_currency_symbol="",
        lang="en") 

Out[3]: 'i am a sample text i have many weird characters such as and some numbers and more here is a newline character and a sign some words are capitalized and this is an email address'

以下是MS网站提供的触控笔：

<div className={styles.calloutButtonArea} ref={this._menuButtonElement}> 
      <DefaultButton className={styles.clearButton}
       disabled={false}
       checked={true}
       text="Clear Form"
       onClick={this._onShowMenuClicked}
            />
         </div>
          {this.state.isCalloutVisible && (
           <Callout
            className={styles.callout}
            role="alertdialog"
            gapSpace={0}
            target={this._menuButtonElement.current}
            onDismiss={this._onCalloutDismiss.bind(this)}
            setInitialFocus={true}
            >   
            <div className={innerstyles.header}>
        <p className={innerstyles.title}>
          Really clear all text from this form?
       </p>
        </div> 
         <div className={innerstyles.inner}>
            <p className={innerstyles.subtext}>
              Message body
            </p>
         </div>
   <PrimaryButton onClick={this._onNew.bind(this)}>Agree</PrimaryButton>
   <DefaultButton onClick={this._onCalloutDismiss.bind(this)}>Cancel</DefaultButton>      
       </Callout>    
     )} 

关于如何将其固定到按钮的任何想法。现在看起来像这样：

它应该附在“清除表单”按钮上！