react-native - 如何在按下另一个组件时启动基于本机的日期点击器?
问题描述
我想在用户按下按钮时强制启动基于本机的 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>
);
}
}
解决方案
我已经更改了您的一些代码,删除了您的条件。并添加了您想要的代码,基于按钮单击打开 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>
);
}
}
推荐阅读
- reactjs - 使用 NextJS 路由器时的 useEffect 依赖项
- php - 在未按下提交按钮之前,如何停止将附件(使用 TRIX)上传到服务器?拉拉维尔 8
- python-docx - 如何在表格中插入脚注
- python - 看不懂递归函数的解决办法
- vue.js - Vue路由器可以通过动态参数区分确切的路由匹配和匹配吗?
- c - 如何使用 Ptrace_interrupt 命令
- java - 无法执行 android:onClick 的方法,原因是:java.lang.reflect.InvocationTargetException
- javascript - 如何使用jQuery从动态生成的元素中获取数据
- python-3.x - 使用 NLTK 的句子级别 Bleu 分数
- python - 如何读取 Pandas DataFrame 的前 10 行?