ReactとOffice Fabricを使用して詳細リストにボタンを集中させる方法

Question

反応するDetailsListにボタンをフォーカスする方法についての提案はありますか？参考文献を移動するための方法のように見える、と私はこのような何かをしたいと思います：

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

しかし、私は、ボタン要素にrefのハンドルを取得することができていません。私は今取得することができます）didComponentMount（中

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

：

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

そして、私は集中したいボタン（renderItemColumnから来る）：私が試した

一つのアプローチは、私のDetailsListであります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のページで何か読んだら、refの代わりにcomponentRefの小道具を使うべきだとわかりました。
はここ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>