button - 在本机反应中获取按钮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
}

---

编辑：另一个解决方案是总是返回标题道具的父组件：

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 提示（在页面底部）

我们通常建议在构造函数中绑定或使用属性初始化语法，以避免此类性能问题。

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