自定义 onChange 事件 Formik

Question

I'm trying to customize the onChange in formik input to convert the value that is string to number, however, the behavior is not changed, the console.log is also not shown on screen. I believe it is not overwriting Formik's default behavior. What am I doing wrong?

Control Input

<App.FormField name={'monthly_salary'}>
                      {({field, form}) => (
                        <C.InputGroup>
                          <C.InputLeftAddon bg={'primary.100'}>
                            {'R$'}
                          </C.InputLeftAddon>

                          <Custom.Input
                            variant={'secondary'}
                            placeholder={t('form.placeholder_value_zero')}
                            mask={'currency'}
                            handleChange={(e) => {
                              console.log(parseValue(e.currentTarget.value))
                              form.setFieldValue(
                                field.name,
                                parseValue(e.currentTarget.value)
                              )
                            }}
                            {...field}
                          />
                        </C.InputGroup>
                      )}
                    </App.FormField>

My Custom Component Input

export const Input = ({mask, handleChange, ...props}: InputProps) => {
  const handleInput = useCallback(
    (e: React.FormEvent<HTMLInputElement>) => {
      if (mask === 'currency') {
        currency(e)
      }
    },
    [mask]
  )

  return (
    <C.Input
      inputMode={'numeric'}
      onInput={handleInput}
      onChange={handleChange}
      {...props}
    />
  )
}

Answer 1

I cannot reproduce your code to test it, but I suggest you try this

onChange={(e) => {
  handleChange(e);
  console.log(parseInt(e.currentTarget.value))
  form.setFieldValue(
    field.name,
    parseInt(e.currentTarget.value)
  )
}}

instead of

handleChange={(e) => {
  console.log(parseValue(e.currentTarget.value))
  form.setFieldValue(
    field.name,
    parseValue(e.currentTarget.value)
  )
}}

Answer 2

You can try something like that:

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    let newEvent = event;

    newEvent.target.value = "asd";
    return field.onChange(newEvent);
  };