내 구성 요소에서 값을 가져 오는 방법은 무엇입니까?

Question

내가 원하는대로 날짜 형식을 지정하는 구성 요소를 만들었지 만 "react-native-modal-datetime-picker"를 사용하는 DateTimePicker와 다른 구성 요소를 만들었지 만 사용자가 모달을 표시하는 단추가 있습니다 날짜를 지정하면 이미 포맷 된 날짜와 그 날짜 위의 레이블이 버튼에 표시됩니다.

문제는 내보기에서 날짜 값이 필요하며 구성 요소에서 그 값을 가져 오는 방법을 모르겠다는 것입니다. (난 내 다른 구성 요소를 사용하고 있음을 참조)

import React from 'react'; 
import {Text} from 'react-native'; 

export default class DateFormatter extends React.Component { 
    formatDate(date){ 
    if(date==null) 
     if(this.props.text!=null) 
     return this.props.text; 
     else 
     return "Selecione uma data"; 
    else 
     return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear(); 
    } 

    render(){ 
    return(
     <Text style={this.props.style}> 
     {this.formatDate(this.props.date)} 
     </Text> 
    ); 
    } 
} 

내 InputDate :

import React from 'react'; 
import {View, TouchableOpacity, Text, Dimensions} from 'react-native'; 
import DateTimePicker from 'react-native-modal-datetime-picker'; 
import DateFormatter from '../components/DateFormatter'; 

export default class InputDate extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     isDateTimePickerVisible: false, 
     date: null, 
     showLabel: false 
    } 
    } 

    showDateTimePicker =() => { 
    this.setState({isDateTimePickerVisible: true}); 
    } 

    hideDateTimePicker=() => { 
    this.setState({isDateTimePickerVisible: false}); 
    } 

    handleDatePicked = (date) => { 
    this.setState({date: date}); 
    this.setState({showLabel: true}); 
    this.hideDateTimePicker(); 
    } 

    render(){ 
    return(
     <View style={{flex: 1}}> 
     <DateTimePicker isVisible={this.state.isDateTimePickerVisible} onConfirm={this.handleDatePicked} onCancel={() => this.setState({isDateTimePickerVisible: false})} /> 
     <Text style={{paddingBottom: 5}}>{this.state.showLabel ? "Data da Inspeção" : ""}</Text> 
     <TouchableOpacity style={{width: Dimensions.get('window').width * 0.9, height: 40}} onPress={() => this.setState({isDateTimePickerVisible: true})}> 
      <DateFormatter date={this.state.date} text={"Data da Inspeção"} style={this.state.date==null ? {fontSize: 16, paddingLeft: 5, color: "#575757"} : {fontSize: 16, paddingLeft: 5, color: "#000"}}/> 
      <View style={{backgroundColor: '#dfdfdf', alignSelf: 'stretch', height: 1, marginTop: 5}}></View> 
     </TouchableOpacity> 
     </View> 
    ); 
    } 
} 

그리고 내보기에

, 내가

내 DateFormatter는 (내가 텍스트의 값이 필요합니다) 단지 <InputDate />을 사용하면됩니다. InputDate 구성 요소에서 값을 가져와 내보기에서 어떻게 사용할 수 있습니까?

Answer 1

국가/소도구를 통해 구성 요소를 통해 형식화 된 날짜 값을 올릴 필요가 있습니다. Date Formatter 구성 요소는 서식을 지정하고 해당 날짜에 저장하는 props 함수를 통해 입력 날짜 구성 요소에 값을 전달합니다. 이 메서드를 다시 사용하여 입력 날짜 부모 구성 요소 상태를 업데이트 할 수 있습니다.

날짜 포맷터

import React from 'react'; 
import {Text} from 'react-native'; 

export default class DateFormatter extends React.Component { 
    formatDate(date){ 
    if(date==null) 
     if(this.props.text!=null) 
     return this.props.text; 
     else 
     return "Selecione uma data"; 
    else 
     return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear(); 
    } 

    componentDidMount(){ 
     // Update parent component state 
     this.props.handleDateFormat(this.formatDate(this.props.date)); 
    } 

    render(){ 
    return(
     <Text style={this.props.style}> 
     {this.formatDate(this.props.date)} 
     </Text> 
    ); 
    } 
} 

입력 날짜

import React from 'react'; 
import {View, TouchableOpacity, Text, Dimensions} from 'react-native'; 
import DateTimePicker from 'react-native-modal-datetime-picker'; 
import DateFormatter from '../components/DateFormatter'; 

export default class InputDate extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     isDateTimePickerVisible: false, 
     date: null, 
     showLabel: false, 
     formattedDate: null 
    } 
    } 

    showDateTimePicker =() => { 
    this.setState({isDateTimePickerVisible: true}); 
    } 

    hideDateTimePicker=() => { 
    this.setState({isDateTimePickerVisible: false}); 
    } 

    handleDatePicked = (date) => { 
    this.setState({date: date}); 
    this.setState({showLabel: true}); 
    this.hideDateTimePicker(); 
    } 

    handleDateFormat = (formattedDate) => { 
     this.setState({ 
      formattedDate: formattedDate 
     }) 
    } 

    render(){ 
    return(
     <View style={{flex: 1}}> 
     <DateTimePicker handleDateFormat={this.handleDateFormat} isVisible={this.state.isDateTimePickerVisible} onConfirm={this.handleDatePicked} onCancel={() => this.setState({isDateTimePickerVisible: false})} /> 
     <Text style={{paddingBottom: 5}}>{this.state.showLabel ? "Data da Inspeção" : ""}</Text> 
     <TouchableOpacity style={{width: Dimensions.get('window').width * 0.9, height: 40}} onPress={() => this.setState({isDateTimePickerVisible: true})}> 
      <DateFormatter date={this.state.date} text={"Data da Inspeção"} style={this.state.date==null ? {fontSize: 16, paddingLeft: 5, color: "#575757"} : {fontSize: 16, paddingLeft: 5, color: "#000"}}/> 
      <View style={{backgroundColor: '#dfdfdf', alignSelf: 'stretch', height: 1, marginTop: 5}}></View> 
     </TouchableOpacity> 
     </View> 
    ); 
    } 
}