React Native：在ListView中引用 [英] React Native: Refs in ListView

问题描述

看起来很难直接访问视图的参考。

It looks like the refs of views in is hard to be directly accessed.

现在我有一个包含单元格的列表视图。在 renderRow 函数中，我有类似的东西：

Now I have a list view with a cells. In the renderRow function I have something like:

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

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

In this case, if I want to access this TextInput using ref, it will be undefined.

我在Github上看到了一个帖子（ https://github.com/facebook/react-native/issues/897 ）提到了一种解决方法，但我仍然无法理解如何使用它：

I saw a thread on Github (https://github.com/facebook/react-native/issues/897) mentioned about a way to resolve this, but I still couldn't understand how to use it:

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

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

Please help me understand how this ref function works, and how to use it (i.e. programmatically focus on the TextInput in the row.). Thank you!

推荐答案

React Component上的 ref 属性可以是一个字符串或一个回调函数，它将在第一个参数中使用该组件调用。

The ref attribute on a React Component can either be a string or a callback function, which will be called with the component in its first argument.

因此，将函数传递给 ref 属性将在安装组件时执行它，组件本身位于第一个参数中。

So passing a function to a ref attribute will execute it when the component is mounted, with the component itself in the first argument.

你粘贴的github代码是在通过 ref 回调属性。 行参数本质上是< TextInput /> 本身。

What the github code you pasted is doing is adding the component to a two-dimensional array when it's mounted via the ref callback attribute. The row argument is essentially the <TextInput/> itself.

你想达到什么目的？可能会有一个更简单，更清洁的解决方案。

What do you want to achieve ? There might be an easier and cleaner solution.

编辑：关于你在尝试什么实现，这将工作：

Regarding what you're trying to achieve, this would work :

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

你可以在那里潜入更多的TextInput事件 https://facebook.github.io/react-native/docs/textinput.html#content 。

You can dive more into TextInput events there https://facebook.github.io/react-native/docs/textinput.html#content.

这篇关于React Native：在ListView中引用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！