日期文本输入的自动反斜杠React Native

Question

有人知道如何创建一个文本输入吗？当你开始输入时，它会自动允许一定数量的数字，并对数字进行自动反斜杠分隔。

年月日(我不想使用日期选择器或库(。

Answer 1

尝试这个react组件：

https://github.com/benhurott/react-native-masked-text

安装

npm install react-native-masked-text --save

用法

render() {
//the type is required but options is required only for some specific types.
return (
<TextInputMask
refInput={(ref) => this.myDateText = ref;}
type={'datetime'}
options={{
format: 'DD-MM-YYYY HH:mm:ss'
}}
/>
)
}

有一种口罩适合你：

datetime：使用具有时刻格式的日期时间掩码(默认为DD/MM/YYYY HH:MM:ss(。它接受选项(请参阅本文档后面的内容(。

Answer 2

您可以使用这样的东西：

<TextInput
onChangeText={(text) => this.handleTextChange({text})}
value={this.state.text}
/>

在handleTextChange()中，对插入的文本执行任何需要的操作，然后将其设置为状态

Answer 3

checkValue(str, max) {
if (str.charAt(0) !== '0' || str == '00') {
var num = parseInt(str);
if (isNaN(num) || num <= 0 || num > max) num = 1;
str = num > parseInt(max.toString().charAt(0))
&& num.toString().length == 1 ? '0' + num : num.toString();
};
return str;
};

this.type = 'text';
var input = e.target.value;
var expr = new RegExp(/D/$/);
if (expr.test(input)) input = input.substr(0, input.length - 3);
var values = input.split('/').map(function(v) {
return v.replace(/D/g, '')
});
if (values[0]) values[0] = this.checkValue(values[0], 12);
if (values[1]) values[1] = this.checkValue(values[1], 31);
var output = values.map(function(v, i) {
return v.length == 2 && i < 2 ? v + '/' : v;
});
this.setState({
registrationDate:output.join('').substr(0, 14)
})
}

<input type="text" className="input-attr" maxLength="25" onChange={(e) => this.dateTimeInputChangeHandler(e)}
placeholder={translationData.datePlaceholderText}
value={this.state.registrationDate}/>

您可以使用类似的东西来实现它。onchange事件将帮助处理输入。