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

React Component上的ref属性可以是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事件。

React Native：在ListView中引用

1 个答案: