Question

努力争取我的裁判以及他们的工作方式……也许有人可以帮忙？

基本上，当我单击div时，我试图使光标集中在输入元素上，但是努力弄清楚它是如何工作的。

我们点击“重命名” 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();

带有向下传递的ref属性的输入字段。

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

Answer 1

如果您使用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/

Answer 2

好，对于任何偶然发现此问题的人来说。这就是答案。

您需要检查生命周期方法。我将this.input.current作为空对象获取，但是，我正在根据子道具之一的状态更新可显示的输入-可编辑的向下传递到组件。

使用不赞成使用的函数componentDidUpdate-将状态与先前的状态进行比较，我能够获取引用，并最终单击输入！

将ref传递给组件props，然后将焦点放在div上的输入元素上，单击React.createElement

2 个答案: