Quiero elegir dos veces startTime y EndTime, pero los valores que guardamos en useState cambian start-Time en lugar de EndTime y, en algún momento, el selector selecciona el valor automático para startTime cuando elijo endTime y viceversa. ¿Cómo puedo administrar los estados y selector para guardar solo un valor a la vez sin cambiar el valor de los segundos estados
const [show, setShow] = useState(false); const [fromTime, setFromTime] = useState(new Date()); const [toTime, setToTime] = useState(new Date()); const onFromTimeChange = (event, selectedFromTime) => { const currentFrom = selectedFromTime || fromTime; setShow(!show); setFromTime(currentFrom); }; const onToTimeChange = (event, selectedToTime) => { const currentToTime = selectedToTime || toTime; setShow(!show); setToTime(currentToTime); }; const showMode = (currentMode) => { setShow(true); setMode(currentMode); }; const showFromTimepicker = () => { showMode("time"); }; const showToTimepicker = () => { showMode("time"); }; return ( <Text style={styles.workUkText}> Job Availability (Select Hours) </Text> <View style={styles.ukWorkView}> <Text style={styles.fromAvailability}>From</Text> <View style={styles.fromTime}> <TextInput onTouchStart={showFromTimepicker} style={{ fontWeight: "600", fontSize: 16 }} value={moment(fromTime).format("HH : mm")} onChangeText={onFromTimeChange} /> {show && ( <DateTimePicker testID="dateTimePicker" value={fromTime} mode={mode} is24Hour={true} display="default" onChange={onFromTimeChange} /> )} </View> <Text style={styles.fromAvailability}>To</Text> <View style={styles.fromTime}> <TextInput onTouchStart={showToTimepicker} style={{ fontWeight: "600", fontSize: 16 }} value={moment(toTime).format("HH : mm")} onChangeText={onToTimeChange} /> {show && ( <DateTimePicker testID="TimePicker" value={toTime} mode={mode} is24Hour={true} display="default" onChange={onToTimeChange} /> )} </View> ) .```Está utilizando el mismo show de estado para ambos selectores. usar otro estado show ayudará a resolver su problema o para hacer con un solo estado, puede hacer algo como esto
const [show, setShow] = useState('none'); const [fromTime, setFromTime] = useState(new Date()); const [toTime, setToTime] = useState(new Date()); const onFromTimeChange = (event, selectedFromTime) => { const currentFrom = selectedFromTime || fromTime; setShow('none'); setFromTime(currentFrom); }; const onToTimeChange = (event, selectedToTime) => { const currentToTime = selectedToTime || toTime; setShow('none'); setToTime(currentToTime); }; const showMode = (currentMode,pickerType) => { setShow(pickerType); setMode(currentMode); }; return ( <Text style={styles.workUkText}> Job Availability (Select Hours) </Text> <View style={styles.ukWorkView}> <Text style={styles.fromAvailability}>From</Text> <View style={styles.fromTime}> <TextInput onTouchStart={()=>showMode("time","showFromPicker")} style={{ fontWeight: "600", fontSize: 16 }} value={moment(fromTime).format("HH : mm")} onChangeText={onFromTimeChange} /> {show==="showFromPicker" && ( <DateTimePicker testID="dateTimePicker" value={fromTime} mode={mode} is24Hour={true} display="default" onChange={onFromTimeChange} /> )} </View> <Text style={styles.fromAvailability}>To</Text> <View style={styles.fromTime}> <TextInput onTouchStart={()=>showMode("time","showToPicker")} style={{ fontWeight: "600", fontSize: 16 }} value={moment(toTime).format("HH : mm")} onChangeText={onToTimeChange} /> {show==="showToPicker" && ( <DateTimePicker testID="TimePicker" value={toTime} mode={mode} is24Hour={true} display="default" onChange={onToTimeChange} /> )} </View> )