如何在tcomb-form-native模板中获取值datepicker?

时间:2019-07-11 10:07:37

标签: tcomb-form-native

我正在尝试使用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

        },
}

我想从定制模板中获取价值。

0 个答案:

没有答案