如何调用组件的方法

我正在使用本机基本datepicker，并希望从组件外部调用ShowDatePicker方法。除了：

以外，它是这样的。

this.datepicker不存在
我不知道该方法是暴露的还是如何达到的。

我认为这与使用Refs有关？

谢谢！

<Content>
  <Button onPress={this.DatePicker.showDatePicker}>
  <DatePicker props}/>
</Content>

datePicker源代码：https：//github.com/geekyants/nativebase/blob/master/src/src/basic/datepicker.js

好吧，如果您必须像另一个答案一样介绍它，如下所示

<Content>
  <Button onPress={this.DatePicker.showDatePicker}>
  <DatePicker ref={ref => this.DatePicker = ref } {...this.props}/>
</Content>

但是，除非DatePicker组件将Props作为ref，否则这不会解决您的问题。简而言之，即使您在组件中执行此操作，也将无法访问showDatePicker。宁愿这样做，您可以以两种方式执行此操作（假设您正在尝试在按钮上显示hide组件。选项1：使用将显示隐藏组件的Prop showDatePicker。对于ex，

<Content>
  <Button onPress={this.setState({showHide: !this.state.showHide})}>
  <DatePicker showDatePicker={this.state.showHide}  {...this.props} />
</Content>

然后在DatePicker中使用此道具来执行一些逻辑。或选项2，使用条件操作员显示隐藏整个组件。w对于ex，

<Content>
  <Button onPress={this.setState({showHide: !this.state.showHide})}>
  {this.state.showHide && <DatePicker {...this.props} />}
</Content>

让我知道您是否想做其他事情，我会更新答案。

编辑：在gist.github.com/fotoflo/13b9dcf2a078ff4ff49abaf7dccd040e179中查看您的代码，我想知道您要做什么。简而言之，您尝试通过单击按钮显示datepicker。不幸的是，目前不可能查看本地基础 - 在单击输入时如何显示datepicker？和文档https://docs.nativebase.io/components.html#date-picker-def-headref。如果您真的想拥有它，应该考虑这些可能的解决方案，选项1：fork native-base进行操作并使用datepicker，甚至将PR提交给native-base以备将来使用。Option2：您可以使用任何第三方库来进行：例如：https：//www.npmjs.com/package/react-native-native-modal-datetime-picker。或我最喜欢的选项3：

import { TouchableOpacity, Text, Modal, View, Platform, DatePickerIOS, DatePickerAndroid } from 'react-native';
state = {
      currentDate: date,
      showiOSDatePicker: false,
      chosenDate: date,
      formattedDate
}
showDatePicker = async () => {
    if (Platform.OS === 'ios') {
      this.setState({
        showiOSDatePicker: true
      });
    } else {
      const { chosenDate, currentDate } = this.state;
      try {
        const {action, year, month, day} = await DatePickerAndroid.open({
          date: chosenDate,
          maxDate: currentDate
        });
        if (action !== DatePickerAndroid.dismissedAction) {
          const dateSelected = new Date(year, month, day);
          const formattedDate = this.getFormattedDate(dateSelected)
          this.setState({chosenDate: dateSelected, formattedDate});
          console.log(formattedDate)
        }
      } catch ({code, message}) {
        console.warn('Cannot open date picker', message);
      }
    }
  }
render() {
const { showiOSDatePicker } = this.state;
  return (
    <View>
       {showiOSDatePicker &&
          <Modal
            animationType="fade"
            transparent
            visible={showiOSDatePicker}
            onRequestClose={() => {
              Alert.alert('Modal has been closed.');
          }}>
            <View
              style={{
                display: 'flex',
                flex: 1,
                justifyContent: 'center'
              }}
            >
              <View style={{
                margin: 22,
                backgroundColor: 'rgba(240,240,240,1)'
              }}>
                <View
                  style={{
                    borderBottomColor: 'rgba(87,191,229,1)',
                    borderBottomWidth: 2,
                    display: 'flex',
                    justifyContent: 'center',
                    height: 70,
                    paddingRight: 20
                  }}
                >
                  <Text style={{
                    color: 'rgba(40,176,226,1)',
                    fontSize: 20,
                    paddingLeft: 20
                  }}>
                    {formattedDate}
                  </Text>
                </View>
                <DatePickerIOS
                  date={chosenDate}
                  onDateChange={this.setDate}
                  maximumDate={currentDate}
                  mode="date"
                />
                <TouchableOpacity
                  style={{
                    borderTopColor: 'rgba(220,220,220,1)',
                    borderTopWidth: 1,
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    height: 50
                  }}
                  onPress={this.onCloseDatePicker}
                >
                  <Text>
                    Done
                  </Text>
                </TouchableOpacity>
              </View>
            </View>
          </Modal>
        }
        <TouchableOpacity onPress={this.showDatePicker}>
          <Text>Show Date</Text>
        </TouchableOpacity>
    </View>
  );
}

让我知道这是否有意义，否则我将在https://snack.expo.io/中汇总一个工作示例欢呼

您必须给出ref datepicker

<Content>
  <Button onPress={this.DatePicker.showDatePicker}>
  <DatePicker ref={ref => this.DatePicker = ref } props}/>
</Content>

我有同样的问题，这是我的解决方案：

本地base datepicker：

 <DatePicker
              defaultDate={new Date(2018, 4, 4)}
              minimumDate={new Date(2018, 1, 1)}
              maximumDate={new Date(2020, 12, 31)}
              locale={"es"}
              timeZoneOffsetInMinutes={undefined}
              modalTransparent={true}
              animationType={"fade"}
              androidMode={"default"}
              placeHolderText="Select date"
              textStyle={{ color: "green" }}
              placeHolderTextStyle={{ color: "#d3d3d3" }}
              onDateChange={this.setDate.bind(this)}
              disabled={false}
              ref={c => this._datePicker = (c) } 
            />

，您可以打开datepicker：

 <Button onPress={()=>{ this._datePicker.setState({modalVisible:true})}}>
   <Text>
  showDatePicker
  </Text>
</Button>

我希望它能有所帮助

相关内容

最新更新

热门标签：