Apswak Apswak - 25 days ago 26
Javascript Question

How to target the node instead of the node number with an onPress

I have a bunch of users who are being rendered into

<StatusSphere/>
components in the
<ListView/>
.

When I click on each of the
<StatusSpheres/>
I would like their individual
uid
's to print to the console (so I can further manipulate them).

This is where I'm having trouble; on React I would use
e.target.value
, or even could use
getAttributes
. But here all I am getting back is a number (for example 237 or 248.. etc) which I believe is the node number?

I have found another source that says you can use:

var ReactNativeComponentTree =require('react/lib/ReactNativeComponentTree');
ReactNativeComponentTree.getInstanceFromNode(nativeTag);


but that didn't work for me and seems weird anyway.

How can I easily access the uid which is already stored on the actual component? There must be a straightforward way that I haven't come across.

Many thanks

export default class UserList extends Component {
constructor() {
super();
this.userRef = firebase.database().ref().child('users')
this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
this.state = {
users: this.ds.cloneWithRows([])
}
}
componentWillMount() {
//Checks my firebase database for the users and pushes it into the this._users array....
this._users = []
this.userRef.on('child_added', snap => {
this._users.push({
user: snap.val().username,
isOnline: snap.val().isOnline,
isChatter: snap.val().isChatter,
uid: snap.val().uid
});
//...which then gets passed into this function...
this.populateUsers(this._users);
}).bind(this);
}
populateUsers(nodes) {
//which then populates the state with the databases' users, which is then automatically rendered in the listview below
this.setState({users: this.ds.cloneWithRows(nodes)});
}
_toChat(e) {
console.log('************ native target *************');
console.log(e.target);
console.log('************ native target *************');
}
render() {
return (
<ListView
horizontal
enableEmptySections={true}
dataSource={this.state.users}
renderRow={d => <StatusSphere onPress={this._toChat}
uid={d.uid}
user={d.user}
isOnline={d.isOnline}
isChatter={d.isChatter}/>}/>
)
}
}

Answer

I'm not sure I have understand your question but ;

you can call toChat method with exstra parameter using arrow function.

onPress={(e)=>{this._toChat(e,d.uid)}}
Comments