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 (
            
                {/*写法1*/}
                 this.updateNum(newText)}/>
                您输入的手机号:{this.state.inputedNum}
            
        );
    }
}

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 (
            
                {/*写法2*/}
                
            
        );
    }
}

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

你可能感兴趣的:(TextInput 的 onChangeText 监听回调的正确写法)