React Native:在ListView中引用

Question

看起来很难直接访问视图的引用.

现在我有一个包含单元格的列表视图.在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

refReact Component上的属性可以是a string或callback函数,它将在第一个参数中使用组件调用.

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

你粘贴的github代码是在通过ref回调属性挂载时将组件添加到二维数组中.这个row论点基本上就是<TextInput/>它自己.

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

编辑:关于你想要实现的目标,这将有效:

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事件.