2016-12-02 72 views
0

我想使用onSubmitEditing = {()=> this.refs.date.press()}打開日期選擇器,但按,onPress或click不是函數。通過ref按下一個組件的功能是什麼?如何通過ref按下組件?

<View> 
     <Text>Apellido</Text> 
     <TextInput ref="lastname" onSubmitEditing={() => this.refs.date.click()} onChangeText={(lastname) => this.setState({ lastname })} returnKeyType="next" /> 
    </View> 
    <View> 
     <Text>Fecha nacimiento</Text> 
     <DatePicker 
     ref="date" 
     date={this.state.date} 
     onDateChange={(date) => this.setState({ date })} 
     /> 
    </View> 
+1

http://stackoverflow.com/questions/37949981/call-child-method-from-parent ..這就是你正在找? – semuzaboi

+0

Yees,thaks you !! –

+0

wc ...你可以回答並關閉你自己:)! – semuzaboi

回答

0

解決方法是調用顯示DatePicker的函數內部。

SignUp.js

<View> 
     <Text>Apellido</Text> 
     <TextInput ref="lastname" onSubmitEditing={() => this.refs.date.showPicker()} onChangeText={(lastname) => this.setState({ lastname })} returnKeyType="next" /> 
    </View> 
    <View> 
     <Text>Fecha nacimiento</Text> 
     <DatePicker 
     ref="date" 
     date={this.state.date} 
     onDateChange={(date) => this.setState({ date })} 
     /> 
    </View> 

DatePicker.js

import React, { Component } from 'react'; 
import moment from "moment"; 
import { 
    DatePickerAndroid, 
    Text, 
    TouchableWithoutFeedback, 
    View, 
} from 'react-native'; 
export default class DatePicker extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     date: props.date, 
     text: moment(props.date).format('DD/MM/YY'), 
     maxDate: props.maxDate, 
     minDate: props.minDate, 
    }; 
    } 

    async showPicker() { 
    try { 
     const {action, year, month, day} = await DatePickerAndroid.open(
     { date: this.props.date, maxDate: this.props.maxDate, minDate: this.props.minDate } 
    ); 
     if (action !== DatePickerAndroid.dismissedAction) { 
     var date = new Date(year, month, day); 
     this._onDateChange(date); 
     } 
    } catch ({code, message}) { 
     console.warn('Error in example ' + message); 
    } 
    } 
    _onDateChange(date) { 
    var text = moment(date).format('DD/MM/YY'); 
    this.props.onDateChange(date); 
    this.setState({ 
     text, 
     date 
    }); 
    } 
    render() { 
    return (
     <TouchableWithoutFeedback onPress={() => this.showPicker()}> 
     <View > 
      <Text style={this.props.style}>{this.state.text}</Text> 
     </View> 
     </TouchableWithoutFeedback> 
    ); 
    } 
} 
DatePicker.defaultProps = { 
    date: new Date(), 
    minDate: new Date(1900, 1, 1), 
    maxDate: new Date(2016, 11, 1) 
};