打字稿：_this2.onClick不是一个函数

Question

I use typescript for react-native development. Here List and ListItem are from NativeBase and ListItem is like TouchableOpacity component.

...
public onClick = () => this.props.navigation.navigate("NextScreen");
public _renderRow = (item: any) {
    return (
        <ListItem onPress={() => this.onClick()}>
             ...
        </ListItem>
    );
}
public render() {
   return(
        <List
            dataArray={this.data}
            renderRow={this._renderRow}
        />
   );
}

When I click item, it shows following error.

_this2.onClick is not a function. (In '_this2.onClick()', '_this2.onClick' is undefined)

I assume this is because onClick() function isn't bound to component class. Is the function bound automatically in typescript?

How can I solve this problem?

Answer 1

You need to bind the method to the components class:

public onClick() { 
  this.props.navigation.navigate("NextScreen"); 
}
public _renderRow(item: any) {
    return (
        <ListItem onPress={this.onClick}>
             ...
        </ListItem>
    );
}
public render() {
   return(
        <List
            dataArray={this.data}
            renderRow={this._renderRow.bind(this)} // <---- Here
        />
   );
}