如何使用 React 和 Office Fabric 在详细信息列表中聚焦按钮

Question

有人对如何在 React DetailsList 中聚焦按钮有建议吗？参考似乎是要走的路，我想做这样的事情：

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

但是我一直无法在按钮元素上获得 ref 句柄。

我尝试过的一种方法是在我的 DetailsList 中：

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

还有我想要关注的按钮（来自 renderItemColumn）：

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

在 didComponentMount() 中，我现在可以访问 DetailList，但我不知道如何让按钮 ref 获得焦点。

或者，我可以将按钮定义为：

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

这给了我一个按钮的句柄，但它没有 focus() 功能。

谢谢你的想法。

Answer 1

我认为您没有ref正确引用（您不需要findDOMNode）。使用关键字
设置并附ref加到类实例后，this您只需使用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 页面上阅读了一些内容后，我发现您应该使用 propcomponentRef而不是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>