如何调用组件的方法

问题描述 投票：0回答：3

我正在使用native-base datepicker，并希望从组件外部调用ShowDatePicker方法。它应该是这样的，除了：

  1. This.DatePicker不存在
  2. 我不知道该方法是否暴露，或者如何触及它。

我认为它与使用refs有关？

谢谢！

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

DatePicker源代码：https://github.com/GeekyAnts/NativeBase/blob/master/src/basic/DatePicker.js

react-native native-base
3个回答
2
投票

好吧，如果你必须像另一个答案所说的那样引用它，如下所示

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

然而，除非DatePicker组件将道具视为ref，否则这不会解决您的问题。简而言之，即使您在组件中执行此操作，也无法访问showDatePicker。而是试图这样做，你可以用两种方式做到这一点（假设你试图在按钮点击时显示隐藏组件。选项1：使用支持showDatePicker，它将显示隐藏组件。例如，

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

然后在DatePicker使用这个道具做一些逻辑。或者选项2，使用条件运算符显示隐藏整个组件。 w对于前者，

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

如果您想要做其他事情，请告诉我，我会更新答案。

编辑：在gist.github.com/fotoflo/13b9dcf2a078ff49abaf7dccd040e179中查看您的代码，我想到了您要做的事情。简而言之，您尝试在单击按钮时显示日期选择器。不幸的是，目前无法查看Nativebase - how to show datepicker when clicking input?和文档https://docs.nativebase.io/Components.html#date-picker-def-headref。如果你真的想拥有它，你应该考虑这些可能的解决方案，选项1：fork native-base进行操作并使用datepicker甚至将PR提交给native-base以备将来使用。选项2：您可以使用任何第三方库，例如：https://www.npmjs.com/package/react-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/干杯中汇总一个有效的例子

1
投票

你必须给一个引用DatePicker

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

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

NativeBase 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>

我希望它有所帮助

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.