javascript - Fabric 用户界面 : How do I position a ContextualMenu?

Question

我希望能够在指定点打开上下文菜单。

我可以从 API 文档 ( https://dev.office.com/fabric#/components/contextualmenu ) 中看到我必须将 targetPoint 设置为 IPoint，但没有说明如何实际执行此操作.

那么 - 如何使用 IPoint 在 Fabric UI 中定位组件？

Answer 1

(2019 年 3 月编辑:一些用户报告说，在下面的示例中，应该使用 target 而不是 targetPoint。这就是示例下面对我有用。)

好的 - 据我所知，这个 API 完全没有记录，但以下将围绕鼠标单击生成一个上下文菜单

class Preview extends React.Component {
  constructor (props) {
    super(props)
    this.showContextMenu = this.showContextMenu.bind(this)
    this.state = { showContextMenu: false }
  }
  showContextMenu (e, text) {
    this.setState({
      showContextMenu: ((text.length > 0) ? true : false),
      selectionText: text,
      targetPoint: {
        x: e.clientX,
        y: e.clientY
      }
    })
  }
  render () {
    return (
      <div className='ms-font-m ms-bgColor-themeLighter' onMouseUp={(e) => this.showContextMenu(e, window.getSelection().toString())}>
        <div>
          { this.state.showContextMenu && <ContextualMenu useTargetPoint="true" target={this.state.target} items={[ { key: '1', name: "boo" }, { key: '2', name: "yah" }]} /> }
        </div>
        <p>
          This is a really interesting paragraph, etc...
        </p>
      </div>
    )
  }
}