Fabric UI : ContextualMenu를 어떻게 배치합니까?

Question

지정한 지점에서 ContextMenu를 열고 싶습니다.

targetPoint을 IPoint으로 설정해야한다는 API 문서 (https://dev.office.com/fabric#/components/contextualmenu)에서 확인할 수 있지만 실제로 어떻게하는지 설명하지는 않습니다.

따라서 IPoint을 사용하여 Fabric UI에 구성 요소를 배치합니까?

Answer 1

OK-이 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" targetPoint={this.state.targetPoint} items={[ { key: '1', name: "boo" }, { key: '2', name: "yah" }]} /> } 
     </div> 
     <p> 
      This is a really interesting paragraph, etc... 
     </p> 
     </div> 
    ) 
    } 
}