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

Question

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

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

但我无法获得按钮元素的引用句柄。

我尝试过的一种方法是在我的详细信息列表中：

        <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 并将其附加到 class 实例后，您只需使用 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>

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

How to focus a button in a details list using React and Office Fabric

javascript

reactjs

office-ui-fabric

office-fabric