Hoe to call Alert onPress and send some parameter in that in react native

问题

Here I am calling on alart function onPress on text field . On calling that fucntion I am trying to open alert and on confirm I am calling onther fucntion . But its getting hang if I am calling "showAlert1()" . This function is getting call many times I have to call showAlert() function onPress and I have to send some value in in . And on confimation ok button on Alert I have to upload to server .

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>

回答1:

Try to change :

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

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

And

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

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

回答2:

Make Sure you have Imported "Alert" from 'react-native', not some other module.

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

First of all, try changing this:

<SmallText text={'Proceed'}  onPress={this.showAlert1(data.offering.code,data.offering.version,data.offering.name)} textColor='white' />

to:

<SmallText text={'Proceed'}  onPress={() => this.showAlert1(data.offering.code,data.offering.version,data.offering.name)} textColor='white' />

Also try to change

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

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

回答3:

as the Kishan Bharda answer addition. when we met the problem, we should know why not just correct.

as for how to pass the function to the component props, you can read the official blog, and get more details

when we want to pass params to props, here are two ways:

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

when your do like your question

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

it is not pass the funtion, it is called not a reference.

来源：https://stackoverflow.com/questions/58723037/hoe-to-call-alert-onpress-and-send-some-parameter-in-that-in-react-native

标签

javascript

reactjs

react-native

ecmascript-6

alert