React / Redux 与 AntDesign 专注于组件答案

【问题标题】：React / Redux with AntDesign focus on componentReact / Redux 与 AntDesign 专注于组件
【发布时间】：2018-09-16 11:34:12
【问题描述】：

我有点坚持我在我的应用程序上实现的这个功能。我需要在 componentDidMount() 或类似的组件上设置焦点。

我已经尝试了一些建议，例如：

componentDidMount(){
   this.nameDiv.focus(); 
}

<div ref={(div) => { this.nameDiv = div; }}>

用于焦点或类似的（Antdesign 组件）焦点。

或类似的东西：

document.getElementById("mytext").focus();

<input type="text" id="mytext"/>

通常我在控制台上收到错误：“无法读取未定义的属性'焦点'”

所以问题是：如何将焦点集中在 react / antDesign 组件上？

【问题讨论】：

可能是您的this 有问题，也许可以像在文档中那样尝试：reactjs.org/docs/refs-and-the-dom.html#callback-refs
你的反应代码没有任何错误信息：codesandbox.io/s/mol6l26ny.
阅读reactjs.org/docs/refs-and-the-dom.html#callback-refs后，我在此链接上实现了模型。适用于输入，我将使用其他组件进行测试。感谢您的帮助。

标签： javascript css reactjs react-redux antd

【解决方案1】：

请查看以下代码。我相信这会对你有所帮助。

import React from "react";
import ReactDOM from "react-dom";

class TestFocus extends React.Component {
    componentDidMount = () => {
        this.refs.focusedInput.focus();
    };

    render = () =>
        <React.Fragment>
            <input placeholder="I don't want focus :/" />
            <br />
            <input ref="focusedInput" placeholder="Please focus on me :B" />
        </React.Fragment>;
}

ReactDOM.render(<TestFocus />, document.getElementById("root"));

使用 react 16.8.6 和 react-dom 16.8.6 测试

如果有帮助，请告诉我。

【讨论】：