Question

任何人都有关于如何将按钮集中在详细信息列表中的建议？ Refs似乎是要走的路，我想做这样的事情：

        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，但我不确定如何让按钮引用焦点。

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

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

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

感谢您的想法。

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页面上做了一些阅读后我发现你应该使用道具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将按钮聚焦到详细信息列表中

1 个答案: