我正在尝试使用tcomb-react-native和模板react-native-datepicker从模型(datepicker)创建。我选择日期后会显示价值,但提交表单后我无法获得价值。
我正在使用tcomb库中的默认验证,如果该字段为空,则表示验证是错误的,表格中的颜色发生了更改。
这是我的组件日期选择器
class MyDatePicker extends React.Component {
constructor(props) {
super(props);
this.state = {
_onDateChange:''
};
}
render() {
return (
<DatePicker
style={{width: '100%'}}
date={this.state._onChangeDate}
format="DD/MM/YYYY"
placeholder="dd/mm/yyyy"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
customStyles={
{
dateIcon: {
width: 33,
height: 38,
resizeMode: 'contain',
right: 0,
marginRight: 0
},
dateInput: {
borderWidth: 0,
justifyContent:'center',
marginBottom:25,
alignItems: 'flex-start',
marginTop:25,
paddingLeft: 15,
fontSize: 17,
},
dateText:{
fontSize: 17,
},
placeholderText: {
fontSize: 17,
color: '#9e9e9e'
}
}
}
iconSource={Images.loginScreen.icon.calendar}
onDateChange={(date) => {this.setState({_onChangeDate: date})}}
/>
)
}
}
这是我的模板
function CustomDatePicker(locals) {
if (locals.hidden) {
return null;
}
var stylesheet = locals.stylesheet;
var formGroupStyle = stylesheet.formGroup.normal;
var controlLabelStyle = stylesheet.controlLabel.normal;
var textboxViewStyle = stylesheet.textboxView.normal;
var textboxStyle = stylesheet.textbox.normal;
if (locals.hasError) {
formGroupStyle = stylesheet.formGroup.error;
controlLabelStyle = stylesheet.controlLabel.error;
textboxViewStyle = stylesheet.textboxView.error;
}
return (
<View style={formGroupStyle}>
<Text style={controlLabelStyle}>{locals.label}</Text>
<View style={textboxViewStyle}>
<MyDatePicker/>
</View>
</View>
);
}
我的模特
const RegistrasiModel = t.struct({
Birthdate: t.Date,
})
我最后的选择
const RegistrasiOption = {
order: [Birthdate],
auto: 'placeholders',
fields: {
Birthdate: {
label: 'Birthdate',
placeholder: 'dd/mm/yyyy',
mode: 'date',
template: CustomDatePicker
},
}
我想从定制模板中获取价值。