正文

react native中state和ref的使用

IP云
IP云V管理员/6 阅读
08/26
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

react native中state和ref的使用

因props是只读的，页面中需要交互的情况我们就需要用到state。

一、如何使用state

1：初始化state

第一种方式：

constructor(props) {
super(props)
console.log('_____constructor_____')
this.state = {
count: 0
}
}render() {
return (
<View>
点击增加 {this.state.count}
</View>
);
}

第二种方式：

state = {
count: 0
}render() {
return (
<View>
点击增加 {this.state.count}
</View>
);
}

例子：点击增大或减小气球的小例子

import {
Text,
View,
Image
} from 'react-native';constructor(props) {
super(props)
console.log('_____constructor_____')
this.state = {
size: 40
}
}render() {
return (
<View>
<Text onPress = {() =>{
this.setState({
size: this.state.size+10
})
}}>
点击增加
</Text>
<Image
style={{width:this.state.size,height:this.state.size}}
source={require('./1.png')}
>
</Image>
<Text onPress = {() =>{
this.setState({
size: this.state.size-10
})
}}>
点击减小
</Text>
</View>
);
}

二、ref的使用

组件中定义ref的值：

<MyComponent ref='myRef'/>

获取ref的值

this.refs.myRef

注意：这里的this.refs.myRef就是组件实例，可以获取到实例的属性和方法

例子：

1：利用ref触发子组件的方法

子组件中定义一个方法:

refFun() {
console.log(123)
}

父组件中调用

<View>
<MyComponent ref='myRef'/>
<Text onPress={() => {
this.refs.myRef.refFun()
}}>点击输出值</Text>
</View>