TextInput 的 onChangeText 监听回调的正确写法

TextInput 的 onChangeText 回调的两种写法

//写法一
onChangeText = {(newText) => this.updateNum(newText)}

或

//写法二（这种写法和写法一有很多不同的地方，请参照上边示例代码中写法2查看）
onChangeText = {this.updateNum}

这里注意回调调用的写法，切记不可写成

 onChangeText = {this.updateNum(newText)}

写法一

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    View,
    Text,
    TextInput,
    PixelRatio,
} from 'react-native';

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            inputedNum: '',//写法1
        };
    }

    updateNum(newText) {//写法1
        this.setState((state) => {
            return {
                inputedNum: newText
            };
        });
    }

    render() {

        return (
            <View style={styles.container}>
                {/*写法1*/}
                <TextInput placeholder={'请输入账号'} onChangeText={(newText) => this.updateNum(newText)}/>
                <Text>您输入的手机号：{this.state.inputedNum}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

写法二

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    View,
    Text,
    TextInput,
    PixelRatio,
} from 'react-native';

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            inputedPW: ''//写法2
        };
        this.updatePW = this.updatePW.bind(this);//写法2
    }

    updatePW(newText) {//写法2
        this.setState(() => {
            return {
                inputedPW: newText
            };
        });
    }

    render() {

        return (
            <View style={styles.container}>
                {/*写法2*/}
                <TextInput placeholder={'请输入密码'} secureTextEntry={true} onChangeText={this.updatePW}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

上述2种写法，请根据 写法1 或 写法2 的几处注意点，查看写法