ios - React Native: Refs in ListView

Question

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

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>
},

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

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

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!

Answer 1

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.

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

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.

---

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

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