Передавая ссылку на реквизиты компонента, затем сфокусируйтесь на элементе ввода по щелчку div с помощью React.createElement

Question

изо всех сил пытается свести мою голову с реферами и как они работают ... Возможно, кто-то может помочь?

Обычно я пытаюсь сфокусировать курсор на элементе ввода, когда нажимаю на div, но пытаюсь понять, как он работает.

Кликаем по тегу «Rename» h4

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();
}

Компонент.

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

Как создается компонент и вход.

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

Поле ввода с переданным опорным реквизитом.

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

Answer 1

Хорошо, так что для любого, кто сталкивается с этим. Вот ответ.

Вам необходимо проверить свои методы жизненного цикла. Я получал this.input.current как нулевой объект, однако я обновлял то, что вводить для отображения, основываясь на состоянии одного из дочерних объектов - редактируемый, передаваемый компоненту.

Используя устаревшую функцию componentDidUpdate - сравнивая состояние с предыдущим состоянием, я смог получить ссылку и, таким образом, в конечном итоге нажать на вход!

Answer 2

Если вы используете React 16.3+, вы можете использовать React.createRef() следующим образом:

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

Подробнее о новом React.createRef() см .: https://reactjs.org/docs/refs-and-the-dom.html

Рабочий пример: https://jsfiddle.net/uns4jp0o/