KaiHotz / react-formik-ui

A simple component library, composed out of pure HTML form elements to make your live easier composing forms with Formik and React
https://kaihotz.github.io/react-formik-ui/
MIT License
164 stars 15 forks source link

React-Formik-UI checkbox's onChange event not accessible #62

Closed vishalqss closed 3 years ago

vishalqss commented 3 years ago

I am using checkbox from react-formik-ui and it seems I am not able to access the onChange event of this component after I recently updated my react-formik-ui from version 4.0.3 to 5.1.9 and updated formik from version 2.0.8 to 2.2.6.

Implementation of the checkbox:

import {Checkbox} from 'react-formik-ui';

const RenderCheckBox = ({properties}) => {
  return (
    <Fragment key={properties.name}>
      {!properties.isHidden &&
      <FormGroup key={properties.name}>
        <ControlLabel>{properties.label} {properties.required &&
        <span className="required"> * </span>} </ControlLabel>
        <Row>
          {properties.fields.map((element, key) => {
            return (
              <Field key={key} name={element.name}>
                {(props) => {
                  const {onChange: onChangeHandler} = element;
                  const {field, form} = props;
                  return (
                    <Col key={key} className={element.className}>
                      <Checkbox key={key}
                                name={element.name}
                                required={properties.required}
                                disabled={element.isDisabled ? element.isDisabled : false}
                                text={element.label}
                                checked={properties.fields ? properties.fields.find(option => option.value === field.value) : ''}
                                onChange={event => {
                                  console.log("onChange Ran!!")
                                  if (onChangeHandler) {
                                    onChangeHandler(event);
                                  }
                                  form.handleChange(event)
                                }}
                                onBlur={form.handleBlur}
                                value={element.value}
                      />
                    </Col>
                  );
                }}
              </Field>
            )
          })}
        </Row>
      </FormGroup>
      }
    </Fragment>
  )
};

I am not able to run the onChangeHandler through onChange event and even the console log is not coming.

KaiHotz commented 3 years ago

Since v5 the Checkbox does not receive onChange anymore it is handled under the hood directly by the component. Also if you using v5 please update to v5.1.11, you don't need to use the Field component here you can just render the Checkbox component without onChange, Formik will take care of it for you, in case you need to handle side effects on value change you can do this with an useEffect hook inside your Formik Form