ref를 통해 구성 요소를 누르는 방법?

Question

onSubmitEditing = {() => this.refs.date.press()}를 사용하여 datepicker를 열려고하는데 press, onPress 또는 click이 함수가 아닙니다. 심판을 통해 구성 요소를 누르는 기능은 무엇입니까?

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

Answer 1

해결책은 내부적으로 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) 
};