回答如何从父

Question

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

以下是我的应用程序到目前为止的快速视图。

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

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

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

• env 用于将状态从列表项切换到输入框并返回列表项。

• toggleEvn 是我用于子组件的每个操作的函数，其中回调是子组件make。

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

componentDidMount: function() { ReactDom.findDOMNode(ref-name-passed-from-child-component-callback).focus(); }

在子元素中，我将点击的列表项ref（等于输入框的参考号）传递给回调，因此父级可以捕获它但是它传递 null 所以我无法从ReactDom.findDOMNode()添加焦点。

我检查了反应文档，他们说了类似

的内容

  

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

我是一个非常新手的反应，我认为这是指我目前的情况。

但是他们还有另一种方法可以通过在ref中传递回调来使用refs，当点击某个按钮时将使用该回调https://facebook.github.io/react/docs/more-about-refs.html

我按照

的例子

• 添加像这样ref={(ref) => this.myTextInput = ref}的参考回调 在我的输入标签中。

• 单击列表项时，我触发了该功能，而不是按钮。由于this.myTextInput尚未创建，因此无法正常工作。 （因为单击列表项时会触发此功能，并且在输入之前会触发此功能。

• 此时我完全陷入困境，因为我无法通过此引用在componentDidMount中检查它。

我确信我在这里有一些理解，请参考refs，子组件和回调。请帮忙。