Get name of button onPress in react native

Question

I have two buttons that both call the same onPress function. In the callback I want to be able to differentiate between which was pressed.

<MKRadioButton
   title='A' 
   group={this.radioGroup}
   onPress={this._toggle}
 />

<MKRadioButton
   title='B' 
   group={this.radioGroup}
   onPress={this._toggle}
 />

then the call

_toggle(event) {
    //what should go here to figure out if title A or B was called?
}

NiFi · Accepted Answer · 2017-06-07T22:12:33.440

12

One solution is to pass that info as a parameter:

<MKRadioButton
  title='A' 
  group={this.radioGroup}
  onPress={(event) => this._toggle(event, 'A')}
/>

The callback would then use that parameter

_toggle(event, buttonId) {
  // Use buttonId
}

EDIT: Another solution is a parent component that always returns the title prop:

class RadioParent extends Component {
  render() {
    return (
      <MKRadioButton
        title={this.props.title} 
        group={this.props.radioGroup}
        onPress={(event) => this.props.onPress(event, this.props.title)}
      />
    );
  }
}

edited Jun 07 '17 at 22:12

answered Jun 07 '17 at 21:41

NiFi

2,398
1
17
26

1

I'm not sure what you mean by that, are you referring to the title prop being A as well as the callback parameter? Is there something else not stated in the question you are trying to accomplish? – NiFi Jun 07 '17 at 21:49
Yeah I have like 30 of these buttons so there will have to be a lot of extra text and it'll make it hard to update in the future. Ideally I want to get a reference to the button that was clicked and find the title that way – Alexis Jun 07 '17 at 21:57
You could solve that by creating a parent component (if extending `MKRadioButton`'s API isn't an option) that always returns the given `title` prop as the second parameter in `onPress`, similar to the code above. – NiFi Jun 07 '17 at 22:04
Added an example of a parent component. Does that meet your requirements? – NiFi Jun 07 '17 at 22:15

Florent Roques · Answer 2 · 2017-09-23T17:29:06.853

To improve performance, you can bind the event handler in the constructor to have it rendered only once

Facebook tip (at the bottom of the page)

We generally recommend binding in the constructor or using the property initializer syntax, to avoid this sort of performance problem.

class MKRadioButtonWrapper extends React.PureComponent {
  constructor(props) {
    super(props);
    this.buttonPressed = this.buttonPressed.bind(this);
  }

  buttonPressed(){
    this.props.onPress(this.props.title);
  }

  render() {
    return (
    <MKRadioButton
       title={this.props.title}
       group={this.props.group}
       onPress={buttonPressed}
     />
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);

    this._toggle = this._toggle.bind(this);
  }

  _toggle(title) {
    //do what you want with the title
  }

  render() {
    return (
      <View>
        <MKRadioButtonWrapper
           title='A' 
           group={this.radioGroup}
           onPress={this._toggle}
         />

        <MKRadioButtonWrapper
           title='B' 
           group={this.radioGroup}
           onPress={this._toggle}
         />
      </View>
    );
  }
}

Get name of button onPress in react native

2 Answers2

Linked