如何從我的組件獲取價值？

Question

我創建了一個格式化日期的組件，但我創建了另一個組件，它是使用「react-native-modal-datetime-picker」的DateTimePicker，但帶有顯示模式的按鈕以及用戶選擇日期，它在按鈕上顯示已經格式化的日期和日期上方的標籤。

問題是我需要在我的視圖上的日期值，我不知道如何從我的組件獲得該值。

我DateFormatter（我需要一個文本值）：

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> 
    ); 
    } 
} 

而且在我看來，我是隻是使用<InputDate />。我如何從InputDate組件獲取值並在我的視圖中使用？

Answer 1

您需要通過狀態/道具將組件格式化日期值提升。 Date Formatter組件將執行格式化，然後通過一個道具函數將值傳遞給Input date組件，該道具函數將其保存在其狀態中。您可以再次使用此方法更新輸入日期父組件狀態。

日期格式化

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> 
    ); 
    } 
}