Javascript 反应如何改变内部组件的焦点'；来自父对象的输入框

我有一个子组件，它从一个数组中呈现多个列表元素。单击此子组件时，其列表项将变为输入框，并且可以更改。但我还需要在渲染时将焦点放在输入框上

这里是我的应用程序到目前为止的快速视图

• 我从状态中的数组中创建列表项，然后在父组件渲染函数中填充数组项时进行映射（与任何其他教程显示的一样）

  render:function（）{
  var listItems=this.state.components.map（函数（项）{
  返回；
  }.约束（这个）；
  

• id用于从子组件回调以使用id搜索数组

• env用于将状态从列表项切换到输入框，再切换回列表项

• togglevn是我使用回调子组件对子组件进行每次操作时使用的函数

• 现在，我将item.ref传递给子组件，以便它可以将其附加到输入，然后使用

componentDidMount:function（）{
ReactDom.findDOMNode（从子组件回调传递的ref名称）.focus（）；
}

其中，在子元素中，我将单击的列表项ref（等于输入框的ref）传递给回调，以便父元素可以捕获它，但它传递了null，因此我无法从

ReactDom.findDOMNode（）添加焦点

我查看了react文档，他们说

永远不要访问任何组件的渲染方法内部的引用–或者当任何组件的渲染方法在调用堆栈中的任何位置运行时

我是react的新手，我想这是指我目前的情况

但它们也有另一种使用refs的方法，即在ref中传递回调，当单击某个按钮时将使用该回调，如图所示

我以身作则


添加这样的ref回调
ref={（ref）=>this.myTextInput=ref}
在我的输入标签中

我没有使用按钮，而是在单击列表项时触发了该函数。这不起作用，因为尚未创建
This.myTextInput
。（因为该函数是在单击列表项时触发的，并且是在呈现输入之前

在这一点上，我完全被卡住了，因为我无法通过这个ref在componentDidMount中检查它


我确信我在这里缺少一些理解，请使用refs、子组件和回调。请提供帮助。
单击列表项时，您可以尝试触发函数和组件更新。您是否尝试过名为
自动聚焦的道具？
render: function() {
var listItems = this.state.ingredients.map(function(item) {
    return <ListItem key={item.id} id={item.id} refer={item.ref} handleChange={this.toggleEnv} env={item.env} ingredient={item.text} />;
}.bind(this));