2017-11-18 9 views
2

コールバックを使用して、子オブジェクトの位置を取得して配列に追加しています。私はそのIDにキーを追加して、後でその配列を検索することもできます。次に、最初に作成したオブジェクトのキーと、位置配列のキーをリンクできます。コールバックの両方の関数(event、userData)を返しますか?

私は両者が動作するためのコールバックを取得できないようです。 function(event, callback)を返す方法はありますか?

this.props.onLayoutがコールバックでeを送信する理由を知っている場合は、ボーナスポイントが、this.props.onLayout()はコールバックにありません。私はしません!

const dataArray = [{key: 0,id: 'A',},{key: 1,id: 'B',},{key: 2,id: 'Z',}] 

// Root Component 
export default class App extends Component { 
    render(){ 
     return (
      <View> 
      {this.getSomeText()} 
      </ 
    getSomeText() { 
     return dataArray.map(d => 
      <SomeText key={d.key} id={d.id} onLayout={(e) => this.onLayout(e)} /> 
     ) 
    } 
    onLayout (e, id) { 
     // add these items to array 
     // e.nativeEvent.Layout{Width,Height,x,y,id} 
     // I can add the e data but the id data never comes through. 
    } 
} 


// Child Component 
class SomeText extends Component { 
    render() { 
     return (
      <Text 
       onLayout={this.props.onLayout} 
       // onLayout as above this returns the event e but 
       // 2. this.props.onLayout() // doesn't return e at all ?? 
       // 3.() => this.props.onLayout // doesn't work either, why? 
       // 4. (e, this.props.key) => this.props.onLayout(this.props.key) 
       // 4 doesnt work either 
       >Some text</Text> 
     ) 
    } 
} 

答えて

1

あなたは使用することができます。

<Text 
    onLayout={this.props.onLayout} 
    // onLayout as above this returns the event e but 
    // 2. this.props.onLayout() // Calls the function during every render instead of assigning it. 
    // 3.() => this.props.onLayout // Assigns the anonymous function, but when the event occurs and the anonymous function is called, you aren't calling your onLayout function. 
    // 4. (e, this.props.key) => this.props.onLayout(this.props.key) 
    // this.props.key isn't being passed in by the event handler. Also, you are not passing the event to onLayout. Should be (e) => this.props.onLayout(e, this.props.key) 
    >Some text</Text> 

onLayout (e) { 
    const id = e.target.id; 
} 

は以下のコメントにいくつかの追加を参照してください:

<SomeText key={d.key} id={d.id} onLayout={(e) => this.onLayout(e, d.id)} /> 

しかし、あなたはまた、イベントからのIDを取得することができます

+0

ありがとうございます、あなたの答えは私がcallbの '旅'視点に本当に感謝します。 – denden

関連する問題