Fabric UI：如何定位 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>
    )
  }
}

Answer 2

现在（office-ui-fabric-react 6.92.0），没有useTargetPoint和targetPoint道具了。

我们应该使用 target 哪种类型 Element | string | MouseEvent | IPoint | null

    <ContextualMenu
  target={{x: 200, y: 200}}
  items={[ { key: '1', name: "boo" }, { key: '2', name: "yah" }]} />

Fabric UI：如何定位 ContextualMenu？

Fabric UI: How do I position a ContextualMenu?

javascript

office-addins

reactjs