Reputation: 161
I have consulted the threads on stackoverflow regarding this issue and watched this video on how to make a clickable button, but i am still getting errors.
Here is my code
class Button extends Component{
render(){
return(
<View>
<TouchableOpacity
onPress{() => { this.props.onPress() }}>
<Text>LOGIN</Text>
</TouchableOpacity>
</View>
)
}
};
export default class FirstPage extends Component{
constructor(props) {
super(props);
this.state = {clicked: false};
}
onTap = () => {
this.setState({
clicked: true
});
if (this.state.clicked){
return <SecondPage/>
}
}
render(){
return(
<View>
<Button onPress={() => { this.onTap() }}/>
</View>
);
}
}
However, I get this error
<View>
<TouchableOpacity
onPress{() => { this.props.onPress() }}>
^
<Text>LOGIN</Text>
</TouchableOpacity>
May I know what went wrong and what is the solution?
Upvotes: 2
Views: 5231
Reputation: 382
<TouchableOpacity
onPress={() => { this.props.onPress() }}>
<Text>LOGIN</Text>
</TouchableOpacity>
you forget "="
continue;
export default class FirstPage extends Component{
constructor(props) {
super(props);
this.state = {clicked: false};
}
onTap = () => {
alert("点击");
this.setState({
clicked: true
});
}
render(){
return(
<View>
{this.state.clicked?
<SecondPage />
:
<Button onPress={() =>this.onTap()}/>
}
</View>
);
}
}
class SecondPage extends Component{
render(){
return(
<View>
<Text>第二页</Text>
</View>
);
}
}
class Button extends Component{
render(){
return(
<View>
<TouchableOpacity
onPress={() => { this.props.onPress() }}>
<Text>LOGIN</Text>
</TouchableOpacity>
</View>
)
}
};
AppRegistry.registerComponent('RNDemo', () => FirstPage);
Upvotes: 2