Как использовать несколько React Native DateTimePicker

Question

Я новичок в react-native. Мне нужно создать форму с несколькими datetimepicker. Как я могу этого добиться. В настоящее время мой код запутан, и я хотел бы его упростить. Сейчас я просто создаю несколько переменных для каждого datetimepicker. Это делает мой код более длинным и повторяемым. Так что я очень надеюсь, что кто-нибудь сможет мне помочь. Спасибо.

    constructor(props) {
    super(props);
    this.state = {
      startbid: new Date(),
      startbidMode: 'date',
      startbidShow: false,
      endbid: new Date(),
      endbidMode: 'date',
      endbidShow: false,
      startservice: new Date(),
      startserviceMode: 'date',
      startserviceShow: false,
    };
  }

  setStartbidDate = (event, startbid) => {
    startbid = startbid || this.state.startbid;

    this.setState({
      startbidShow: Platform.OS === 'ios' ? true : false,
      startbid,
    });
  }

  setEndbidDate = (event, endbid) => {
    endbid = endbid || this.state.endbid;

    this.setState({
      endbidShow: Platform.OS === 'ios' ? true : false,
      endbid,
    });
  }

  setStartserviceDate = (event, startservice) => {
    startservice = startservice || this.state.startservice;

    this.setState({
      startserviceShow: Platform.OS === 'ios' ? true : false,
      startservice,
    });
  }

  show1 = startbidMode => {
    this.setState({
      startbidShow: true,
      startbidMode,
    });
  }

  show2 = endbidMode => {
    this.setState({
      endbidShow: true,
      endbidMode,
    });
  }

  show3 = startserviceMode => {
    this.setState({
      startserviceShow: true,
      startserviceMode,
    });
  }

  datepicker1 = () => {
    this.show1('date');
  }

  datepicker2 = () => {
    this.show2('date');
  }

  datepicker3 = () => {
    this.show3('date');
  }

А это мой код для формы.

<Form >
    <Label style={styles.labelForm}>Start Bid</Label>
    <Item rounded style={styles.inputs}>
        <TouchableOpacity onPress={this.datepicker1} style={{flexDirection:"row", alignItems:'center'}}>
            <Thumbnail source={require('../assets/images/icons/date.png')} style={styles.icons}/>
            <Text style={{paddingHorizontal:10}}>{startbid.getDate() + '-' + (startbid.getMonth() + 1) + '-' + startbid.getFullYear()}</Text>
        </TouchableOpacity>
        { startbidShow && 
        <DateTimePicker 
            value={startbid}
            mode={startbidMode}
            display="default"
            onChange={this.setStartbidDate} 
        />
        }
    </Item>

    <Label style={styles.labelForm}>End Bid</Label>
    <Item rounded style={styles.inputs}>
        <TouchableOpacity onPress={this.datepicker2} style={{flexDirection:"row", alignItems:'center'}}>
            <Thumbnail source={require('../assets/images/icons/date.png')} style={styles.icons}/>
            <Text style={{paddingHorizontal:10}}>{endbid.getDate() + '-' + (endbid.getMonth() + 1) + '-' + endbid.getFullYear()}</Text>
        </TouchableOpacity>
        { endbidShow && 
        <DateTimePicker 
            value={endbid}
            mode={endbidMode}
            display="default"
            onChange={this.setEndbidDate} 
        />
        }
    </Item>

    <Label style={styles.labelForm}>Start Service</Label>
    <Item rounded style={styles.inputs}>
        <TouchableOpacity onPress={this.datepicker3} style={{flexDirection:"row", alignItems:'center'}}>
            <Thumbnail source={require('../assets/images/icons/date.png')} style={styles.icons}/>
            <Text style={{paddingHorizontal:10}}>{startservice.getDate() + '-' + (startservice.getMonth() + 1) + '-' + startservice.getFullYear()}</Text>
        </TouchableOpacity>
        { startserviceShow && 
        <DateTimePicker 
            value={startservice}
            mode={startserviceMode}
            display="default"
            onChange={this.setStartserviceDate} 
        />
        }
    </Item>

    <View style={{paddingBottom:30}}>
        <Button block
            onPress={this.onClickSubmitButton}>
            <Text>Submit</Text>
        </Button>
    </View>

</Form>

Есть ли способ сделать код более чистым и с меньшим количеством кода?

Answer 1

Я сделал это через свой крючок. Я вызываю компонент реакции через функцию

import React, { useState } from 'react'
import { View, Text, StyleSheet, Button, TextInput, Picker } from 'react-native'
import DateTimePicker from '@react-native-community/datetimepicker'

function useInput() {
    const [date, setDate] = useState(new Date());
    const [mode, setMode] = useState('date');
    const [show, setShow] = useState(false);

    const showMode = (currentMode) => {
        setShow(true);
        setMode(currentMode);
    };
    const showDatepicker = () => {
        showMode('date');
    };

    const onChange = (event, selectedDate) => {
        const currentDate = selectedDate || date
        setShow(Platform.OS === 'ios');
        setDate(currentDate);
    }
    return {
        date,
        showDatepicker,
        show,
        mode,
        onChange
    }
}

export const MainScreen = ({ navigation }) => {
    const input = useInput(new Date())
    const input2 = useInput(new Date())
return (
        <View >
           <Button              
              onPress={input.showDatepicker}
              title={input.date.toLocaleDateString()} />
              {input.show && (
                   <DateTimePicker
                   testID="dateTimePicker1"
                   value={input.date}
                   mode={input.mode}
                   is24Hour={true}
                   display="default"
                   onChange={input.onChange}
                   />
               )}

            <Button              
              onPress={input2.showDatepicker}
              title={input2.date.toLocaleDateString()} />
              {input2.show && (
                   <DateTimePicker
                   testID="dateTimePicker2"
                   value={input2.date}
                   mode={input2.mode}
                   is24Hour={true}
                   display="default"
                   onChange={input2.onChange}
                    />
              )}
  )
}