react-native - 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);

标签： react-native

Answer 1

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

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