React Native 关于箭头函数、普通函数与点击事件的调用
参考：
React Native 关于箭头函数、普通函数与点击事件的调用
一、类组件
箭头函数
1、箭头函数一个重要的好处就是对于this对象指向问题，在普通函数中this对象的指向是可变的，所以在普通函数中this对象可能会存在null的情况，但是箭头函数中this是固定的。
2、this指向定义时所在对象的作用域而不是使用时的。
- 定义及调用
//箭头函数（无参）
press0 = () => {
this.setState({
data0: '箭头函数无参 : ' + Math.floor(Math.random() * 100),
});
};
//调用：
// onPress={this.press0}
// onPress={() => this.press0()}
// onPress={this.press0.bind(this)}
//箭头函数（有参）
press1 = (x) => {
this.setState({
data1: '箭头函数带参 ： ' + Math.floor(Math.random() * 100 * 100 * x),
});
};
//调用：
//onPress={() => this.press1(1)}
//onPress={this.press1.bind(this, 3)}
普通函数
1、普通函数的无参与有参的调用方式相同。
2、注意的是有参的函数使用bind方式传递参数时this必须在最前面。
- 定义及调用
//一般方法（无参）
press1() {
this.setState({
data1: '1被点击了',
});
};
//调用：
// onPress={() => this.press1()}
// onPress={this.press1.bind(this)}
//一般方法（有参）
press3(x) {
this.setState({
data3: x,
});
};
//调用：
//onPress={() => this.press3(4444)}
//onPress={this.press3.bind(this, 3333)}
测试
import React, {Component} from 'react';
import {
Platform,
StyleSheet,
Text,
ScrollView,
Image,
View,
TouchableOpacity,
} from 'react-native';
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = {
data0: '点击0',
data1: '点击1',
data2: '点击2',
data3: '点击3',
};
};
//箭头函数（无参）
press0 = () => {
this.setState({
data0: '箭头函数无参 : ' + Math.floor(Math.random() * 100),
});
};
//箭头函数（有参）
press1 = (x) => {
this.setState({
data1: '箭头函数带参 ： ' + Math.floor(Math.random() * 100 * 100 * x),
});
};
//一般方法（无参）
press2() {
this.setState({
data2: '一般函数无参 ： ' + Math.floor(Math.random() * 100),
});
};
//一般方法（有参）
press3(x) {
this.setState({
data3: '一般函数带参 ：' + Math.floor(Math.random() * 100 * 100 * x),
});
};
render() {
return (
<ScrollView>
<View>
{/* ==============箭头函数（无参）============== */}
<Text
style={[styles.text, {backgroundColor: 'red'}]}
onPress={() => this.press0()}
>{this.state.data0}</Text>
<Text
style={[styles.text, {backgroundColor: 'red'}]}
onPress={this.press0}
>{this.state.data0}</Text>
<Text
style={[styles.text, {backgroundColor: 'red'}]}
onPress={this.press0.bind(this)}
>{this.state.data0}</Text>
{/* ==============箭头函数（有参）============== */}
<Text
style={[styles.text, {backgroundColor: '#FF8041'}]}
onPress={() => this.press1(1)}
>{this.state.data1}</Text>
{/*----深度异常----*/}
{/*}
{/* style={[styles.text,{backgroundColor: '#FF8041',}]}*/}
{/* onPress={this.press1(2)}*/}
{/*>{this.state.data1}*/}
<Text
style={[styles.text, {backgroundColor: '#FF8041'}]}
onPress={this.press1.bind(this, 3)}
>{this.state.data1}</Text>
{/* ==============一般函数（无参）============== */}
<Text
style={[styles.text, {backgroundColor: '#de0dee'}]}
onPress={() => this.press2()}
>{this.state.data2}</Text>
{/*----无响应---*/}
{/*}
{/* style={[styles.text,{backgroundColor: '#de0dee',}]}*/}
{/* onPress={() => this.press2}*/}
{/*>{this.state.data2}*/}
{/*-----not a function-------*/}
{/*}
{/* style={[styles.text,{backgroundColor: '#de0dee',}]}*/}
{/* onPress={this.press2}*/}
{/*>{this.state.data2}*/}
<Text
style={[styles.text, {backgroundColor: '#de0dee'}]}
onPress={this.press2.bind(this)}
>{this.state.data2}</Text>
{/* ==============一般函数（有参）============== */}
<Text
style={[styles.text, {backgroundColor: '#0000ff'}]}
onPress={() => this.press3(1)}
>{this.state.data3}</Text>
{/*------深度异常------*/}
{/*}
{/* style={[styles.text,{backgroundColor: '#0000ff',}]}*/}
{/* onPress={this.press3(2)}*/}
{/*>{this.state.data3}*/}
<Text
style={[styles.text, {backgroundColor: '#0000ff'}]}
onPress={this.press3.bind(this, 3)}
>{this.state.data3}</Text>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
text: {
width: 200,
lineHeight: 50,
textAlign: 'center',
color: '#fff',
height: 50,
marginBottom: 20,
},
});
二、 函数组件
不管箭头函数还是普通函数，都可以以下调用：
onPress={() => { handleClickBtn11();}}/>
onPress={handleClickBtn33}/>
测试
import React, {Component} from 'react';
import {
Platform,
StyleSheet,
Text,
ScrollView,
Button,
Image,
View,
TouchableOpacity,
} from 'react-native';
export function NormalMethod(props) {
//普通函数
function handleClickBtn1() {
console.log('---点击1');
}
function handleClickBtn2() {
console.log('========点击2');
}
function handleClickBtn3() {
console.log('>>>>>>>>>>>>>>>>点击3');
}
//箭头函数
const handleClickBtn11 = () => {
console.log('---点击11');
};
const handleClickBtn22 = () => {
console.log('========点击22');
};
const handleClickBtn33 = () => {
console.log('>>>>>>>>>>>>>>>>点击33');
};
return (
<View>
<View style={{marginTop: 20}}>
<Button
title="点击0"
onPress={() => {
console.log('点击0');
}}/>
</View>
<View style={{marginTop: 20}}>
<Button
title="点击1"
onPress={() => {
handleClickBtn1();
}}/>
</View>
{
//未点击 会调用
//点击 不会调用
}
<View style={{marginTop: 20}}>
<Button
title="点击2"
onPress={handleClickBtn2()}/>
</View>
<View style={{marginTop: 20}}>
<Button
title="点击3"
onPress={handleClickBtn3}/>
</View>
{/*-------------------------------------------------*/}
<View style={{marginTop: 20}}>
<Button
title="点击00"
onPress={() => {
console.log('点击00');
}}/>
</View>
<View style={{marginTop: 20}}>
<Button
title="点击11"
onPress={() => {
handleClickBtn11();
}}/>
</View>
{
//未点击 会调用
//点击 不会调用
}
<View style={{marginTop: 20}}>
<Button
title="点击22"
onPress={handleClickBtn22()}/>
</View>
<View style={{marginTop: 20}}>
<Button
title="点击33"
onPress={handleClickBtn33}/>
</View>
</View>
);
}