2016-11-08 4 views
1

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

答えて

1

私は私はあなたの質問を理解しているかわからないけど。

矢印機能を使用して、余分なパラメータを使用してチャットメソッドを呼び出すことができます。

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

ああ神様、3時間の努力とそれは答えでした..ありがとう! :) – Apswak

+1

あなたは幸運を歓迎します! –

+0

いいえ、これは非常に文書化されていないので、人々はそれをやり続けて、他の人にそれをやるよう勧めています。しかし、毎回新しい関数を作成するため、 'render'を使ってJSX /内で' bind'やarrow関数を使うべきではありません。ここで新しい関数を作成すると、実際にコンポーネントの状態が変更されます。リアクタコンポーネントは、状態変化を伴うコンポーネントのみを再レンダリングします。 Reactを使う主な理由の1つです。これは単一のコンポーネントでは大したことではありませんが、 'map'を使って' ListItem'を作るなど、コンポーネントの配列を生成する必要があるときに問題を迅速に引き起こします。 – hippietrail

関連する問題