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

Question

有人对如何在 React 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;}}
                    />

这给了我按钮的句柄，但它没有 focus() 函数。

感谢您的想法。

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 页面后，我发现你应该使用 Prop 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>