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>
);
}
}