Javascript 如何在克隆的元素上放置ref？

我有一个输入组件，它接受一个

元素并呈现它。它是一个div，包含一个标签和一个输入

我的老板问我，当我点击div中的任何地方时，它会关注输入（因此，如果是下拉菜单，它会打开下拉菜单，输入，我们可以开始写文本，等等）

我在考虑使用refs进行操作：当用户单击div时，触发onClick元素，并获取焦点

但是，所有输入都在

this.props.children

中。如何在输入上放置一个ref并在代码中使用它？下面是它的样子：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Tooltip } from '@material-ui/core';

export class Input extends Component {
  displayTitle () {
    if (this.props.tip) {
      return (
        <label htmlFor={this.props.name} className="lone-input-container-title">
          {this.props.title}<Tooltip placement="top" arrow title={this.props.tip}><span className="shadow-md p-1 text-hardbacon rounded-full px-2 cursor-pointer ml-2">?</span></Tooltip>
        </label>);
    }
    return (
      <label htmlFor={this.props.name} className="lone-input-container-title">
        {this.props.title}
      </label>
    );
  }

  render () {
    return (
      <div className="lone-input-container">
        {this.displayTitle()}
        <div>
          {React.cloneElement(this.props.children[0])}
        </div>
      </div>
    );
  }
}

Input.propTypes = {
  name: PropTypes.string,
  title: PropTypes.string.isRequired,
  children: PropTypes.node.isRequired,
  tip: PropTypes.string
};

export default Input;

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
从“@material ui/core”导入{Tooltip}；
导出类输入扩展组件{
displayTitle（）{
如果（这个道具提示）{
返回(
{this.props.title}？
);
}
返回(
{this.props.title}
);
}
渲染（）{
返回(
{this.displayTitle（）}
{React.cloneElement（this.props.children[0]））
);
}
}
Input.propTypes={
名称：PropTypes.string，
标题：PropTypes.string.isRequired，
子项：PropTypes.node.isRequired，
提示：PropTypes.string
};
导出默认输入；

我不打算完整回答。但我只是想帮你。这是我的建议，可以帮你参考

要在克隆元素中使用ref，可以执行以下操作：

{React.cloneElement(this.props.children[0], {ref: this.refElement})}

---

@Bhojendraurauniyar不，我的问题是关于把ref放在克隆元素上。谢谢你试着帮助我！