1

In my React Native project using NativeBase I'd like to generate a series of Buttons or TouchableOpacities.

That means I don't want each to have a separate onPress handler but one shared one.

But when I look at what is passed to the onPress callback there doesn't seem to be any kind of ID or reference to the component that caused the press, nor can I find such a thing documented.

Am I missing something obvious? Is there another method everybody uses to achieve the same goal? Or is this actually missing functionality?

hippietrail
  • 15,848
  • 18
  • 99
  • 158
  • 1
    Do you want to each key can pass different argument in a same function? – Vahid Boreiri Sep 18 '17 at 04:38
  • @VahidBoreiri: Yes that's what I'm used to in other GUIs. I tried adding a `key` to each Button with a unique identified but that is buried within nested children of the arguments passed to my `onPress` callback so it can't be the right way. – hippietrail Sep 18 '17 at 04:40
  • Update your code if you can. so I can help you better. – Vahid Boreiri Sep 18 '17 at 04:51
  • This comes up quite often under different wordings that are seldom linked: [1](https://stackoverflow.com/questions/35817758), [2](https://stackoverflow.com/questions/38651770), [3](https://stackoverflow.com/questions/40494965), [4](https://stackoverflow.com/questions/42195606), [5](https://stackoverflow.com/questions/44584585), [6](https://stackoverflow.com/questions/45706257). Answers include use `bind` or arrow function inside `render`, [which is bad](https://stackoverflow.com/questions/36677733), or calling unstable undocumented internal functions. – hippietrail Sep 23 '17 at 03:59

2 Answers2

2

You can use your function as below:

  _onPressButton = (id) = () => {
      // do something with id
  }

  _keyExtractor = (item, index) => index;


  _renderItem = ({item}) => (
    <Button onPress={this._onPressButton(item.d)}>
      ...
    </Button>
  );

  return (
    <FlatList
      data={data_array}
      keyExtractor={this._keyExtractor}
      renderItem={this._renderItem}
    />
  );
Vahid Boreiri
  • 3,418
  • 1
  • 19
  • 34
  • No, you missed that I am **generating** the buttons, I am not declaring them manually. I will add them dynamically from an array, object, etc. – hippietrail Sep 18 '17 at 04:47
  • 1
    Not different you can create your Buttons dynamically and put the `onPress` method in it. if you want I can update my answer in this way. – Vahid Boreiri Sep 18 '17 at 04:50
  • I'll check this out and come back with votes or comments, thanks (-: – hippietrail Sep 18 '17 at 08:21
  • Sorry I had to un-accept this because when I went to actually try it out I couldn't get it to work with just what's here alone. I didn't get anywhere with the other answer either. – hippietrail Sep 23 '17 at 12:59
  • It lacks context. For instance I don't know if it's inside a normal, pure, or functional component. Maybe I'm too new to too many concepts to get by on this alone. – hippietrail Sep 25 '17 at 01:52
  • These are not in your question scope. if you want to know more about it you should search or open a new question. – Vahid Boreiri Sep 25 '17 at 06:43
0

You can try to use ref to identify a component

<Button ref={'loginButton'} onPress={this.onButtonPress()}>

Then you access it using this.refs['loginButton']

Hope it helps.

soutot
  • 3,531
  • 1
  • 18
  • 22
  • Do I need to use `bind` for this? In my search I've seen a lot of things with `bind` and `this` that I don't totally grok and none of them seemed to work in my case so far. – hippietrail Sep 18 '17 at 08:20