如何在 onChangeText 回调中立即更改文本？

Question

I have a case i want to do "Write Time"

So I have a TextInput user can write a time "numbers" now as usually i set state with new char using onChangeText So now i want to replace the third character user typed with : immediately and continue other numbers

So the final result should be

user type 123 should change to 12: immediately then continue 12:45

But i can't achieve it :(

code snippet

 const [daysSelected, setDaysSelected] = useState([]);

// sample state after manipulated

     daysSelected = [{
        id: 1,
        day: "Sunday",
        morning: ['', ''],
        evening: ['', ''],
     }]

 <TextInput
        placeholder="07:00"
        maxLength={5}
        ref={ref}
        style={styles.inputTime}
        placeholderTextColor="#707070"
        value={String(daysSelected[item.id]?.morning[0])}
        onChangeText={(text) => {
           
            setDaysSelected((prevState) => {

                  let x = prevState[item.id].morning[0].replace(3, ':');
                  console.log('shouldReplaced?', x); // not works well :\ 
                  console.log('txt', prevState[item.id]?.morning[0]);
                  prevState[item.id].morning[0] = text;
                  return [...prevState];
            });
        }
   />

Answer 1

To this fix this problem here is an approach I suggest:

1. Make sure we always have 4 digit number in the input
2. If the user makes the text input blurred after entering less then 4 digits add leading zeros to make the input as 4 digit

Here is a simple snippet of code to achieve this.

const [inputTime, setTime] = React.useState(null);

  return (
    <View style={styles.container}>
      <TextInput
        maxLength={5}
        placeholder="07:00"
        placeholderTextColor="#707070"
        onBlur={(e) => {
          let { text } = e.nativeEvent;
          let values = text.split(":");
          let value = "";
          if(values.length==1){
            value = values[0].substring(0,4).padStart(4, 0);
            value = value.substring(0, 2) + ':' + value.substring(2);
            setTime(value);
          }else if(values.length==2){
            value = `${values[0].padStart(2, 0)}:${values[1].padEnd(2, 0)}`;
            setTime(value);
          }
          else{
            console.log('wrong input')
          }
        }}
      />
      <Text>{`Formatted time is ${inputTime}`}</Text>
    </View>
  );

Here is the Snack https://snack.expo.io/@saachitech/477b89

Tested with below conditions

Input 123 will be converted to 01:23
Input 1234 will be converted to 12:34
Input 12121 will be converted to 12:12
Input 12:1 will be converted to 12:10
Input 1:23 will be converted to 01:23
Input 12:23 won't have any effect and remain 12:23
Input 01:23 won't have any effect and remain 01:23