一个函数内有两个函数，一个作为道具，一个作为函数

Question

我正在为日历创建一个通用组件。我需要在一个函数内调用两个函数，例如：-

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

}

我该如何实施？谢谢！！！

Answer 1

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()
          } }

一个函数内有两个函数，一个作为道具，一个作为函数

Two function inside one function one as props and one as function

javascript

reactjs

react-native

react-native-android

react-native-ios