React Native：在ListView中引用

看起来很难被直接访问。

现在我有一个单元格的列表视图。 在renderRow函数中，我有这样的东西：

 renderRowView: function(rowData){ return <View > <TextInput ref="text" /> </View> }, 

在这种情况下，如果我想使用ref访问这个TextInput，它将是undefined 。

我在Github上看到一个线程（ https://github.com/facebook/react-native/issues/897 ）提到了解决这个问题的方法，但我仍然不明白如何使用它：

 render: function() { return ( <ListView dataSource={this.state.dataSource} renderRow={(rowData, sec, i) => <Text ref={(row) => this.rows[sec][i] = row}>{rowData}</Text> } /> ); }, 

请帮助我理解这个ref函数是如何工作的，以及如何使用它（即以编程方式专注于行中的TextInput ）。 谢谢！

Answer 1

React组件上的ref属性可以是一个string或一个callback函数，它将在第一个参数中被调用。

因此，将一个函数传递给一个ref属性将会在组件被挂载时执行，组件本身就是第一个参数。

你粘贴的github代码是在通过refcallback属性装载组件时将组件添加到二维数组中。 row参数本质上是<TextInput/>本身。

你想达到什么目的？ 可能有一个更简单和更干净的解决scheme。

---

编辑：关于你想要实现的，这将工作：

 render: function() { return ( <ListView dataSource={this.state.dataSource} renderRow={(rowData) => { var inputRefs = []; var _focusInput = function(name) { inputRefs[name].focus(); }; var input1 = <TextInput ref={(input) => { inputRefs['input1'] = input; }} onSubmitEditing={_focusInput.bind(null, 'input2')} onEndEditing={_focusInput.bind(null, 'input2')} />; var input2 = <TextInput ref={(input) => { inputRefs['input2'] = input; }} />; return ( <View> {input1} {input2} </View> ); }}/> ); } 

您可以在这里https://facebook.github.io/react-native/docs/textinput.html#content更深入地了解TextInput事件。