如何在 React Native 中调用 Alert onPress 并传递一些参数答案

【问题标题】：How to call Alert onPress and pass some parameters in React Native如何在 React Native 中调用 Alert onPress 并传递一些参数
【发布时间】：2019-11-06 04:18:40
【问题描述】：

在这里，我在文本字段上调用警报功能 onPress 。在调用该函数时，我试图打开警报并确认我正在调用另一个函数。但是如果我调用 "showAlert1()" 就会挂起。这个函数被多次调用我必须在 onPress 上调用 showAlert() 函数，并且必须在其中发送一些值。并在警报框上的确认 OK 按钮上，我必须上传到服务器。

showAlert1(code, name, version) {
  console.log("data alaert abc", code, name, version);
  Alert.alert(
    'Confirmation',
    'Are you sure you want to migrate this tariff',
    [
      {
        text: 'Cancel',
        onPress: () => console.log('Cancel Pressed'),
        style: 'Cancel',
      },
      { text: 'Proceed', onPress: () => this.confirmTariffMigration(code, name, version) },
    ]
  );
}

confirmTariffMigration = (code, name, version) => {
  console.log("hhhhdhhdhdhdhhdd", code, name, version);
  const objData = {
    addofferingActionCode: '',
    offeringCode: '',
    offeringName: ''
  }
  this.props.updateTariffMigration(objData)
}

<View style={{ marginLeft: 5, marginRight: 5, marginTop: 10, backgroundColor: '#f1f1f1' }}>
  {
    tariffMigrationData.map((data, index) => {
      return (
        //  <TouchableOpacity key={index} onPress={this.showAlert1(data)}>
        <View style={{ marginBottom: 10, marginLeft: 5, marginRight: 5 }} key={index}>
          <Card>
            <CardItem header style={{ backgroundColor: '#fff', width: '100%', justifyContent: 'space-between', borderBottomColor: '#f1f1f1', borderBottomWidth: 1 }}>
              <View style={{ flexDirection: 'column', justifyContent: 'space-between' }}>
                <View>
                  <RegularText text={`${data.offering.name}`} style={{ fontWeight: 'bold' }} />
                  <SmallText text={` ID ${data.offering.code}`} textColor="grey" />
                </View>
              </View>
              <View style={{
                backgroundColor: 'blue',
                borderRadius: 75, height: 25, paddingRight: 10, paddingLeft: 10, paddingTop: 5
              }}>
                <SmallText text={'Proceed'} onPress={this.showAlert1(data.offering.code, data.offering.version, data.offering.name)} textColor='white' />
              </View>
            </CardItem>
          </Card>
        </View>
      )
    }
  }
</View>

【问题讨论】：

错误信息是什么？
nothing error ....此警报消息在加载渲染函数时被调用..而它应该只在按下时调用..所以 ui 正在挂起

标签： javascript reactjs react-native ecmascript-6 alert

【解决方案1】：

尝试改变：

<TouchableOpacity key={index} onPress={this.showAlert1(data)}>

到

<TouchableOpacity key={index} onPress={() => this.showAlert1(data)}>

还有

showAlert1 (code,name,version) {  
    // code
}

到

showAlert1 = (code,name,version) => {  
    // code
}

【讨论】：

我做了这个 this.showAlert1(data)}> 但是，同样...请检查我的代码并帮助我..跨度>
@AbhigyanGaurav 我编辑了答案。请尝试类似的方法。
嗨基尚..|终于它醒了..谢谢..你很棒...实际上我尝试了所有这些东西..在我的代码中有一个 { 因为这个它是 hqappening .. :)
@Kishan Bharda，能给个解释吗？

【解决方案2】：

确保您已从“react-native”而不是其他模块导入“警报”。

https://i.stack.imgur.com/oMj8s.png

首先，尝试改变这个：

&lt;SmallText text={'Proceed'}  onPress={this.showAlert1(data.offering.code,data.offering.version,data.offering.name)} textColor='white' /&gt;

到：

&lt;SmallText text={'Proceed'}  onPress={() =&gt; this.showAlert1(data.offering.code,data.offering.version,data.offering.name)} textColor='white' /&gt;

也尝试改变

showAlert1 (code,name,version) {  
    #code
}

到

showAlert1 = (code,name,version) => {  
    // code
}

【讨论】：

【解决方案3】：

作为 Kishan Bharda 答案的补充。当我们遇到问题时，我们应该知道为什么不直接纠正。

至于如何将函数传递给组件props，可以阅读官方blog，详细了解

当我们想将参数传递给 props 时，有两种方式：

<TouchableOpacity key={index} onPress={() => this.showAlert1(data)}>
<TouchableOpacity key={index} onPress={this.showAlert1.bind(this,data)}>

当你喜欢你的问题时

<TouchableOpacity key={index} onPress={this.showAlert1(data)}>

它不是传递函数，它被称为不是引用。

【讨论】：

非常感谢 :)