使用AntDesign的React / Redux专注于组件

Question

I'm kind stuck on this feature that i have do implement on my app. I need to set focus in a component on componentDidMount() or something similar.

i'm already try some suggestions like:

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

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

for focus or similar for (Antdesign component) focus.

or something like that:

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

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

usualy i'm receiveing errors on my console: "Cannot read property 'focus' of undefined"

So the question: How can i set focus on a react / antDesign component?

Answer 1

Please look to following code. I'm sure this would help you.

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"));

Tested with react 16.8.6 & react-dom 16.8.6

Let me know, if this helps.