Home > OS >  How to use function's parameters in React-Native
How to use function's parameters in React-Native

Time:11-05

When the button is pressed, it calls the CardInformation function, passing "Test00" as a parameter.

However, in the parameter where the CardInformation function is defined, it is called an unused variable, and no text is output during actual operation.

How should I use it in React-Native?

    import { StatusBar } from 'expo-status-bar';
    import { throwStatement } from 'jscodeshift';
    import React from 'react';
    import { Alert, Button, StyleSheet, Text, View } from 'react-native';
    
    const styles = StyleSheet.create({
        container: {
          flex: 1,
          backgroundColor: '#fff',
          alignItems: 'center',
          justifyContent: 'center',
        },
        ActiveCard: {
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: 'red'
        }
      });
    
    
    export default class HomeScreen extends React.Component
    {
        state =
        {
            CardName : "",
            CardNumber : "",
            CardMemo : ""
        }
    
        CardInformation(cardName, cardNumber, cardMemo)
        {
            this.setState
            ({
                cardName : this.state.CardName,
                cardNumber : this.state.CardNumber,
                cardMemo : this.state.CardMemo,
            })
    
            alert("ok");
        }
    
        onPressed()
        {
            
        }
        
        render()
        {
            return(
                <View style = {styles.container}>
                    <Text>CardName = {this.state.CardName}</Text>
                    <Text>CardNumber = {this.stateCardNumber}</Text>
                    <Text>CardMemo = {this.state.CardMemo}</Text>
                    <Button style = {styles.ActiveCard}
                        title = "Activate"
                        color = "red"
                        onClick = {() => this.CardInformation("Test00", "Test00", "Test00")}
                    />
                    <StatusBar style="auto" />
                </View>
            );
        }
    }

CodePudding user response:

CardInformation(cardName, cardNumber, cardMemo)
{
    this.setState
    ({
        cardName : cardNumber, // this.state.CardName set the value to itself
        cardNumber : cardNumber,
        cardMemo : cardMemo,
    })

    alert("ok");
}

Expo sample:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Alert, Button, StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  ActiveCard: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'red',
  },
});

export default class HomeScreen extends React.Component {
  state = {
    CardName: '',
    CardNumber: '',
    CardMemo: '',
  };

 CardInformation(cardName, cardNumber, cardMemo) {
    this.setState({
      cardName, // short for => cardName: cardName
      cardNumber,
      cardMemo,
    });

    alert('ok');
  }

  onPressed() {}

  render() {
    return (
      <View style={styles.container}>
        <Text>CardName = {this.state.cardName}</Text> // amend this.state.CardName -> this.state.cardName
        <Text>CardNumber = {this.state.cardNumber}</Text>
        <Text>CardMemo = {this.state.cardMemo}</Text>
        <Button
          style={styles.ActiveCard}
          title="Activate"
          color="red"
          onPress={() => this.CardInformation('Test00', 'Test00', 'Test00')}
        />
        <StatusBar style="auto" />
      </View>
    );
  }
}
  • Related