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 tip（位于页面底部）

我们通常建议在构造函数中使用绑定或使用属性初始化程序语法来避免这种性能问题。

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按钮的名称

2 个答案: