Как вызвать метод компонента - PullRequest
Новая
       28

Как вызвать метод компонента

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

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

  1. This.DatePicker не существует
  2. Я не знаю, раскрыт ли этот метод или как его достичь ..

Я думаю, это как-то связано с использованием ссылок?

Спасибо! 

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

Исходный код DatePicker: https://github.com/GeekyAnts/NativeBase/blob/master/src/basic/DatePicker.js

Ответы [ 3 ]

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

Что ж, если вам нужно подтвердить его так же, как говорится в другом ответе, как указано ниже 

<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, я понял, что вы пытаетесь сделать. Короче говоря, вы пытаетесь показать DatePickerпо нажатию кнопки. К сожалению, на данный момент это невозможно, если посмотреть на Nativebase - как показать средство выбора даты при нажатии ввода? и документацию https://docs.nativebase.io/Components.html#date-picker-def-headref. Если вы действительно хотите его получить, выследует подумать об этом возможном решении, Вариант 1: fork native-base выполните ваши манипуляции и используйте средство выбора даты или даже отправьте 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/ Ура

0 голосов
/ 17 июня 2019

У меня была та же проблема, и это было мое решение:

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>

Надеюсь, это поможет

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

Вы должны дать ссылку на DatePicker 

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