React와 Office Fabric을 사용하여 세부 정보 목록에 단추를 초점 맞추는 방법

Question

누구나 세부 정보 목록에 단추를 집중시키는 방법에 대한 제안이 있습니까? 참고 문헌 길을 가야하는 것처럼 보일, 나는 같은 것을 할 싶습니다

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

하지만 버튼 요소에 심판 핸들을 얻을 수 없었다. 지금 얻을 수 있습니다) didComponentMount (에서

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

:

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

내가 집중하려는 버튼 (renderItemColumn에서 오는) : 나는 시도했다

한 가지 방법은 내 DetailsList에 DetailList에 액세스 할 수 있지만 포커스를 단추 참조를 얻는 방법을 잘 모르겠습니다.

또는 I는 다음과 같이 버튼을 정의 할 수 있습니다 :이 버튼에 나에게 핸들을 제공

    <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>