<ListView/>
の<StatusSphere/>
コンポーネントにレンダリングされるユーザーがいます。onPressでノード番号の代わりにノードをターゲットにする方法
私が<StatusSpheres/>
のそれぞれをクリックすると、その個人のuid
のものがコンソールに印刷されるようになります(それでさらに操作することができます)。
これは私が問題を抱えている場所です。私はe.target.value
を使用するか、getAttributes
を使用することもできます。しかしここで私が戻ってくるのは、番号(例えば237や248など)ですが、これはノード番号と思われます。私はあなたが使用できると言う別のソースを発見した
:
var ReactNativeComponentTree =require('react/lib/ReactNativeComponentTree'); ReactNativeComponentTree.getInstanceFromNode(nativeTag);
が、それは私のために働くと、とにかく奇妙思いませんでした。
実際のコンポーネントに既に格納されているuidに簡単にアクセスするにはどうすればよいですか?私が直面していない簡単な方法がなければならない。
感謝
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}/>}/>
)
}
}
ああ神様、3時間の努力とそれは答えでした..ありがとう! :) – Apswak
あなたは幸運を歓迎します! –
いいえ、これは非常に文書化されていないので、人々はそれをやり続けて、他の人にそれをやるよう勧めています。しかし、毎回新しい関数を作成するため、 'render'を使ってJSX /内で' bind'やarrow関数を使うべきではありません。ここで新しい関数を作成すると、実際にコンポーネントの状態が変更されます。リアクタコンポーネントは、状態変化を伴うコンポーネントのみを再レンダリングします。 Reactを使う主な理由の1つです。これは単一のコンポーネントでは大したことではありませんが、 'map'を使って' ListItem'を作るなど、コンポーネントの配列を生成する必要があるときに問題を迅速に引き起こします。 – hippietrail