Question

我创建了一个按照我想要的格式化日期的组件，但我创建了另一个使用“react-native-modal-datetime-picker”的DateTimePicker组件，但是有一个显示模态的按钮以及用户何时选择日期，它会在按钮上显示已格式化的日期和日期上方的标签。

问题是我需要在我的View上使用该日期值，而且我不知道如何从我的组件中获取该值。

我的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组件将执行格式化，然后通过props函数将值传递给Input日期组件，该函数将其保存在其状态中。您可以再次使用此方法更新输入日期父组件状态。

日期格式化程序

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

如何从我的组件中获取值？

1 个答案: