如何识别以编程方式点击的视图

时间:2018-01-12 19:36:41

标签: react-native

我正在开发一个反应原生的Android应用程序。哪个有几个按钮,我想点击每个按钮执行不同的操作。

我对android sdk非常熟悉,在android sdk android:id属性中可以识别组件。但本机反应中的问题是如何识别用户点击了哪个按钮。

<View style = { styles.button_container } >
      <Text 
           onPress={() =>  } >Component
      </Text>
      <Text 
           onPress={() => } >About
      </Text>
 </View>

1 个答案:

答案 0 :(得分:4)

您可以点击按钮发送参数,如下所示:

function MenuComponent(props) {
  return (
    <View style = { styles.button_container } >
      <Text 
       onPress={() =>  props.onClick('component')} >Component
      </Text>
      <Text 
       onPress={() => props.onClick('about')} >About
      </Text>
    </View>
  )
}

假设您要从父母发送onClick道具。父母将知道点击了哪些子元素。

class ParentComponent extends Component {
  onClickMenu = (button) => {
    console.log(button);
  }

  render() {
    return (
      <View>
        <MenuComponent onClick={this.onClickMenu} />
      </View>
    );
  }
}

onClickMenu将通过子组件上的点击按钮获取button参数,然后您可以决定如何为每个案例执行操作。