Две функции внутри одной функции: одна как реквизит и одна как функция - PullRequest
0 голосов
/ 03 августа 2020

Я создаю общий компонент для календаря. Мне нужно вызвать две функции внутри одной функции, например: -

onDateChange = {()=>{ props.onDateChange,setShowCal()}}

, поэтому setShowCal() может закрыть календарь после выбора, а props.onDateChange указать выбранную дату в родительском компоненте.

но только setShowCal() работает, а props.onDateChange не работает.

Полный код общего компонента: -

export const PrimaryCalendar = (props)=>{
const [showCal, setShowCal] = React.useState(false);
const mindate = new Date();
const showCalendar = ()=>{
    setShowCal(!showCal)
}
return(
    <View>
    {(showCal) ? 
        <View style={styles.container}>
        <CalendarPicker
        selectedDayColor="#079B2B"
        minDate = {mindate}
        startFromMonday={true}
        allowRangeSelection={true}
        todayBackgroundColor="#79AE08"
        previousTitle="Previous"
          nextTitle="Next"
        onDateChange = {()=>{ props.onDateChange,setShowCal()}}
        />
        </View>
    :
    <View>
    <TouchableOpacity style={styles.calendarInputContainer} onPress={()=>showCalendar()}>
        <Text style={{color:'white', fontSize:25}}>{props.title}</Text>
        <Icon name="calendar" size={30} color={'white'}/>
        </TouchableOpacity>
    </View>
    }
        </View>
)

}

Как я могу это реализовать? Спасибо !!!

1 Ответ

2 голосов
/ 03 августа 2020
export const PrimaryCalendar = (props)=>{
const [showCal, setShowCal] = React.useState(false);
const mindate = new Date();
const showCalendar = ()=>{
    setShowCal(!showCal)
}
const handleOnDateChange = () =>{
    props.onDateChange()
    setShowCal()
}
return(
    <View>
    {(showCal) ? 
        <View style={styles.container}>
        <CalendarPicker
        selectedDayColor="#079B2B"
        minDate = {mindate}
        startFromMonday={true}
        allowRangeSelection={true}
        todayBackgroundColor="#79AE08"
        previousTitle="Previous"
          nextTitle="Next"
        onDateChange = { handleOnDateChange }
        />
        </View>
    :
    <View>
    <TouchableOpacity style={styles.calendarInputContainer} onPress={()=>showCalendar()}>
        <Text style={{color:'white', fontSize:25}}>{props.title}</Text>
        <Icon name="calendar" size={30} color={'white'}/>
        </TouchableOpacity>
    </View>
    }
        </View>
)

Сделайте так, чтобы ваш обратный вызов onChange выполнял функцию с именем handleTextAreaChange, которая затем выполняет ваши props.onDateChange() и setShowCal()

Ваша ошибка: onDateChange = {()=>{ props.onDateChange,setShowCal()}}

При объявлении () => { } содержимое фигурных скобок является блоком кода, что означает, что запятые, разделяющие вызовы функций, неверны.

Вот пример того, как это делается

onChange={ () => {
            functionCall1()
            functionCall2()
          } }
...