Как запустить родную базовую дату-кликер при нажатии на другой компонент? - PullRequest
Новая
       32

Как запустить родную базовую дату-кликер при нажатии на другой компонент?

0 голосов
/ 23 февраля 2019

Я хочу принудительно запустить базовый DatePicker, когда пользователь нажимает кнопку.

Как бы я это сделал?Ничего не могу найти в документации.

В моем примере я отображаю сборщик условно.Если сборщик уже установлен, я просто показываю кнопку ... 

import React from 'react';

import { Container, Content, Text, Button, DatePicker, Title } from 'native-base';

class Example extends React.Component {

  constructor(props) {
    super(props);
    const now = new Date()
    this.state = { 
        now, 
        chosenDate: now 
    };
  }

  setDate(newDate) {
    this.setState({ chosenDate: newDate });
  }

    callPicker() {
        // what now?
    }

  render() {
    return (
      <Container>
        <Content>

          { 
            this.state.chosenDate== now ?  (
              <Content>
                <DatePicker
                  defaultDate={new Date(2018, 4, 4)}
                  minimumDate={new Date(1960, 1, 1)}
                  maximumDate={new Date(2018, 12, 31)}
                  locale={"en"}
                  timeZoneOffsetInMinutes={undefined}
                  modalTransparent={true}
                  animationType={"fade"}
                  androidMode={"default"}
                  placeHolderText="Select date"
                  textStyle={{ color: "green" }}
                  placeHolderTextStyle={{ color: "#d3d3d3" }}
                  onDateChange={(newDate) => this.setDate(newDate)}
                  disabled={false}
                />
              </Content>
            ) : (
              <Content>
                <Button onPress={callPicker}>
                    <Text>{this.state.chosenDate}</Text>
                </Button>
              </Content>
            )
          }
        </Content>
      </Container>
    );
  }
}

1 Ответ

0 голосов
/ 28 февраля 2019

Я изменил часть вашего кода, удалил ваше условие.и добавил нужный код для открытия DatePicker на основе нажатия кнопки. Я использовал ref для вызова дочернего метода компонента DatePicker. 

import React from "react";
import {
  Container,
  Content,
  Text,
  Button,
  DatePicker,
  Title
} from "native-base";

const now = new Date();
export default class ScreenOne extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      now,
      chosenDate: now
    };
  }

  setDate(newDate) {
    this.setState({ chosenDate: newDate });
  }

  callPicker() {
    // what now?
    this.refs.datePicker.showDatePicker();//<-----call child method to open calender---
  }

  render() {
    return (
      <Container>
        <Content>
          <Content>
            <DatePicker
              ref="datePicker"//<------reference name------
              defaultDate={new Date(2018, 4, 4)}
              minimumDate={new Date(1960, 1, 1)}
              maximumDate={new Date(2018, 12, 31)}
              locale={"en"}
              timeZoneOffsetInMinutes={undefined}
              modalTransparent={true}
              animationType={"fade"}
              androidMode={"default"}
              placeHolderText="Select date"
              textStyle={{ color: "green" }}
              placeHolderTextStyle={{ color: "#d3d3d3" }}
              onDateChange={newDate => this.setDate(newDate)}
              disabled={false}
            />
          </Content>
          <Content>
            <Button onPress={() => this.callPicker()}>
              <Text>{JSON.stringify(this.state.chosenDate)}</Text>
            </Button>
          </Content>

        </Content>
      </Container>
    );
  }
}
...