React-Native TextInput在子组件中落后了一步

Question

日志记录中子组件中的

TextInput在我的输入文件中落后了一步

父项：

import React from 'react';
import {
  View,
  Text,
} from 'react-native';
import NumberInput from '../../Components/NumberInput'; //child component

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: '',
    };
  }

  onChange = value => {
    this.setState({number: value});
    console.log(this.state.number);
  };

  render() {
    return (
      <View>
        <Text>Login</Text>
        <NumberInput onChange={this.onChange} />
      </View>
    );
  }
}

子组件

import React from 'react';
import {View, Text, TextInput} from 'react-native';
import {withNavigation} from 'react-navigation';

const NumberInput = ({onChange}) => {
  return (
    <View>
      <Text>Enter mobile number to continue</Text>
      <TextInput
        style={styles.input}
        keyboardType={'phone-pad'}
        placeholder="999-999-9999"
        underlineColorAndroid="transparent"
        autoCompleteType="tel"
        maxLength={10}
        onChangeText={value => onChange(value)}
      />
    </View>
  );
};

export default withNavigation(NumberInput);

Answer 1

将您的console.warn()作为回调传递到this.setState()

this.setState({
    number: value
},() => {
    console.warn(this.state.number);
});