Question

我正在为文本输入添加简单的屏蔽，因此我的DOB字段中的日期看起来像DD / MM / YYYY。

我有一个处理它的功能：

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});
}

我用以下方法调用此函数：

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

文本正确传递。但是，this.value未定义并将其设置为任何值，没有任何区别。

我做错了什么？

Answer 1

我认为你不需要将它作为this.value引用，只需声明一个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})}
  }

我已经在RNPlay here上进行了设置，似乎工作正常：

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

react-native onChangeText this.value未定义

1 个答案: