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

有人对如何聚焦react Details列表中的按钮有什么建议吗？裁判似乎是个不错的选择，我想这样做：

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

findDOMNode（this.refs.mybutton）.focus（）

但我还没能得到按钮元素的ref句柄

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

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

{this.detailsList=list；}
....
/>

以及我要聚焦的按钮（来自renderItemColumn）：

this.handleActionSelection（fieldContent）}
ariaDescription={buttonText}
text={buttonText}
ref={“ButtonIWantToFocus”}
/>

在didComponentMount（）中，我现在可以访问DetailList，但我不确定如何将按钮ref设置为焦点

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

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

{this.focusButton=button；}
/>

这给了我一个按钮的句柄，但它没有focus（）函数

---

谢谢你的想法。

我认为你没有正确引用

ref

（你不需要

findDOMNode

）。
使用

this

关键字设置并将

ref

附加到类实例后，只需使用

this

关键字引用它即可

下面是一个小例子：

类应用程序扩展了React.Component{
焦点BTN=（）=>{
this.btn.focus（）；
};
render（）{
返回(
单击此处以聚焦下面的按钮

{this.btn=ref}}>我是一个按钮
);
}
}
render（，document.getElementById（“根”））

感谢您的快速回复。我认为这个问题与办公织物有关。PrimaryButton元素没有focus（）函数。我能够聚焦它（当它不在表中时）的唯一方法是：findDOMNode（this.refs.doneeextractingbutton）.focus（）；抱歉，刚才注意到您使用的是组件而不是dom元素。在简短阅读之后，您应该使用他们的
道具
组件ref
，而不是
ref
。我将更新我的示例。非常感谢。@Lars没问题。它解决了您的问题吗？因此稍微复杂一点的DetailsList属性“onRenderItemColumn”函数（创建按钮的函数）只在调用componentDidUpdate（）后调用，因此没有任何东西可以触发焦点关闭。我可以通过设置一个500毫秒的定时器来解决这个问题。虽然不漂亮，但很管用。
                    <PrimaryButton
                        disabled={true}
                        ariaDescription={buttonText}
                        text={buttonText}
                        ref={(button) => {this.focusButton = button;}}
                    />