react-native onChangeText this.value未定义

Question

I am adding simple masking to a text input, so the date in my DOB field looks like DD/MM/YYYY.

I have a function to handle that:

dateFormat(text) {
  if (text.match(/^\d{2}$/) !== null) {
    this.value = text + '/';
  } else if (text.match(/^\d{2}\/\d{2}$/) !== null) {
    this.value = text + '/';
  }
  this.setState({birthdate: this.value});
}

I call this function with:

onChangeText={(text) => this.dateFormat(text)}

The text is passed correctly. However, this.value is undefined and setting it to whatever, makes no difference.

What I am doing wrong?

Answer 1

I don't think you need to reference it as this.value, just declare a var value = text:

  onChangeText(text){
    if (text.match(/^\d{2}$/) !== null) {
     var value = text + '/';
     this.setState({birthdate: value})
    } else if (text.match(/^\d{2}\/\d{2}$/) !== null) {
      var value = text + '/';
      this.setState({birthdate: value});
    } else {this.setState({birthdate:text})}
  }

I've set it up on RNPlay here , and is seems to be working fine:

https://rnplay.org/apps/O9a7XQ

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput
} = React;

var SampleApp = React.createClass({

  getInitialState(){
    return {
     birthdate: '' 
    }
  },

  onChangeText(text){
    if (text.match(/^\d{2}$/) !== null) {
      var value = text + '/';
      this.setState({birthdate: value})
    } else if (text.match(/^\d{2}\/\d{2}$/) !== null) {
        var value = text + '/';
        this.setState({birthdate: value});
    } else {this.setState({birthdate:text})}
  },

  render: function() {
    return (
      <View style={styles.container}>       
        <TextInput 
          value={this.state.birthdate} 
          onChangeText={ (text) => this.onChangeText(text) } 
          style={styles.textInput} 
          />
        <Text>{this.state.birthdate}</Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:60
  },
  textInput: {
    height:70,
    backgroundColor: '#ddd'
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);