在反应本机中获取按钮 onPress 的名称

Question

我有两个按钮都调用相同的 onPress 函数。在回调中，我希望能够区分按下的是哪个。

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

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

然后打电话

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

Answer 1

一种解决方案是将该信息作为参数传递：

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

回调将使用该参数

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

编辑： 另一个解决方案是 parent 始终 returns 标题道具的组件：

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

Answer 2

为了提高性能，您可以在构造函数中绑定事件处理程序，使其仅呈现一次

Facebook tip（在页面底部）

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

在反应本机中获取按钮 onPress 的名称

Get name of button onPress in react native

button

react-native

onpress