CODEWITHSUNDEEP
javascriptreactjsjsx
saulable
saulable

Reputation: 485

Passing a ref to component props then focus on input element on div click with React.createElement

struggling to get my head round refs and how they work... Perhaps someone can help?

Basically, I am trying to get the cursor to focus on the input element when I click the div, but struggling to figure out how it works.

We click the "Rename" h4 tag 

overlay = info => {
    const arr = ['Inbox', 'Business', 'Personal'];
    if (arr.indexOf(info.node.props.title) >= 0) {
        return <h4 onClick={() => this.newFolder(info)}>New Folder</h4>;
    } else {
        return (
            <div>
                <h4 onClick={() => this.renameFolder(info)}>Rename</h4>
                <h4 onClick={() => this.newFolder(info)}>New Folder</h4>
                <h4>Delete</h4>
                {/* <h4>{info.node.props.title}</h4> */}
            </div>
        );
    }
};

    renameFolder(info) {
    this.props.renameFolder({
        tree: [...this.props.tracks.tree],
        key: info.node.props.eventKey
    });
    // const e = 'theevent';
    // this.handleFocus(e);
    if (this.toolTip) {
        ReactDOM.unmountComponentAtNode(this.cmContainer);
        this.toolTip = null;
    }
    () => this.myInp.focus();
}

The component. 

<TreeNode
    key={item.key}
    ref={ref={(ip) => this.myInp = ip}}
    handleEditable={this.handleEditable}
    handleFocus={this.handleFocus}
    title={item.title}
    editable={true}
    draggable={false}/>

How the component and input is created. 

this.renderSelector = function() {
    var dragNodeHighlight = _this2.state.dragNodeHighlight;
    var _props6 = _this2.props;
    var title = _props6.title,
        selected = _props6.selected,
        editable = _props6.editable,
        handleEditable = _props6.handleEditable,
        handleFocus = _props6.handleFocus,
        ref = _props6.ref
icon = _props6.icon,
        loading = _props6.loading;
    var _context$rcTree5 = _this2.context.rcTree,
        prefixCls = _context$rcTree5.prefixCls,
        showIcon = _context$rcTree5.showIcon,
        treeIcon = _context$rcTree5.icon,
        draggable =
            _props6.draggable === false ? false : _context$rcTree5.draggable,
        loadData = _context$rcTree5.loadData;
    var disabled = _this2.isDisabled();

The input field with the passed down ref prop. 

    var $title =  React.createElement('input', {
            type: 'text',
            value: title,
            className: 'rc-input-text',
            onChange: handleEditable,
            onFocus: handleFocus,
            ref: ref
        });

Upvotes: 0

Views: 1894

Answers (2)

saulable
saulable

Reputation: 485

Ok, so for anyone that stumbles on to this. Here's the answer.

You need to check your lifecycle methods. I was getting this.input.current as a null object, however, I was updating what input to display based on the state of one of the child props - editable passed down to the component.

Using a deprecated function, componentDidUpdate - comparing the state to the previous state, I was able to acquire the ref and thus ultimately click on the input!

Upvotes: 0

Laurenz Gl&#252;ck
Laurenz Gl&#252;ck

Reputation: 1762

If you using React 16.3+ you can use React.createRef() like this:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.input = React.createRef();
  }

  focusInput = () => {
    this.input.current.focus();
  }

  render() {
    return (
        <div>
            <div onClick={this.focusInput}>Focus Input</div>
            <input type="text" ref={this.input} />
        </div>
    );
  }
}

For more about the new React.createRef() see: https://reactjs.org/docs/refs-and-the-dom.html

Working example: https://jsfiddle.net/uns4jp0o/

Upvotes: 1

Related Questions