如何使用React和Office Fabric將按鈕聚焦到詳細列表中

Question

任何人都有關於如何在反應DetailsList中聚焦按鈕的建議？裁判似乎是要走的路，我想這樣做：

 findDOMNode<HTMLButtonElement>(this.refs.mybutton).focus() 

但我一直沒能得到按鈕元件上的裁判手柄。

一種方法我試過在我DetailsList：

 <DetailsList 
      onRenderItemColumn={this.renderItemColumn} 
      ref={(list) => {this.detailsList = list;}} 
      .... 
     /> 

而且我要重點按鈕（從renderItemColumn推出）：

   <PrimaryButton 
        onClick={() => this.handleActionSelection(fieldContent)} 
        ariaDescription={buttonText} 
        text={buttonText} 
        ref={"ButtonIWantToFocus"} 
       /> 

在didComponentMount（）現在我能得到訪問DetailList，但我不知道如何讓按鈕引用來關注。

或者我可以定義按鈕：

    <PrimaryButton 
         disabled={true} 
         ariaDescription={buttonText} 
         text={buttonText} 
         ref={(button) => {this.focusButton = button;}} 
        /> 

這給我一個手柄的按鈕，但它沒有焦點（）函數。

感謝您的想法。

Answer 1

我認爲你沒有正確引用ref（你不需要findDOMNode）。
在使用關鍵詞this設置並將ref附加到類實例後，您只需使用this關鍵字來引用它。

這裏是一個小例子：

class App extends React.Component { 
 

 
    focusBtn =() => { 
 
    this.btn.focus(); 
 
    }; 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <div onClick={this.focusBtn}>click here to focus the button below</div> 
 
     <hr/> 
 
     <button ref={ref => {this.btn = ref}}>im a button</button> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

編輯
對不起，我剛纔注意到你在談論一個組件（不只是一個組成部分，但的fabric-ui庫組件） 。
在讀完他們的github頁面後，我發現你應該使用道具componentRef而不是ref。
下面是相關的例子與fabric-ui：

class App extends React.Component { 
 

 
    focusBtn =() => { 
 
    this.btn.focus(); 
 
    }; 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <div onClick={this.focusBtn}>click here to focus the button below</div> 
 
     <hr/> 
 
     <Fabric.PrimaryButton componentRef={ref => {this.btn = ref}}>im a button</Fabric.PrimaryButton> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById("root"));

button.ms-Button.ms-Button--primary.css-32:focus{ 
 
    border: 2px solid red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css"> 
 
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css"> 
 
<script type="text/javascript" src="//unpkg.com/office-ui-fabric-react/dist/office-ui-fabric-react.min.js"></script> 
 
<div id="root"></div>