How to call OnChange function in react using withformik with antd component?

Question

Here I'm calling onChange function on Formik Field but its not calling? How to call custom function on a Formik field?

This is my custom function under React Component:

onStudentScore = (value, form) => {
  alert("called");
  const maxScore = value.writtenexammaxscore;
  console.log(maxScore);
  form.getFieldValue("writtenexammaxscore", maxScore);
  if (maxScore > form.getFieldValue("writtenexamstudentsscore")) {
    alert("MaxScore is less than StudentScore");
  }
};

And my Form is created under render and write a onChange function on a StudentScore field. But it's not called? How to call this function?

  render() {
        const { values, handleSubmit} = this.props
        return (
      return (
        <div>
          <h5 align="left">MidTerm Form</h5>
          <Card>
            <Form onSubmit={handleSubmit}>
              <Row>
                <Col span={4}>
                  <b>Written Exam:</b>
                </Col>
                <Col span={2}>
                  <Field
                    name="writtenexammaxscore"
                    component={AntInput}
                    type="text"
                    style={{ width: 40 }}
                  />
                </Col>
                <Col span={2}>outof</Col>
                <Col span={3}>
                  <Field
                    name="writtenexamstudentsscore"
                    component={AntInput}
                    type="text"
                    style={{ width: 40 }}
                    onChange={this.onStudentScore}
                  />
                  // I wrote the function on field this way
                </Col>

                <Col span={2}>
                  <Divider type="vertical" />
                </Col>
              </Row>

              <Row>
                <Col span={10} />
                <Col span={8} push={10}>
                  <Button type="primary" htmlType="submit">
                    Submit
                  </Button>
                </Col>
              </Row>
            </Form>
          </Card>
        </div>
      );
    }
const MidTermForm = withFormik({

    mapPropsToValues: () => ({
        writtenexammaxscore: '',
        writtenexamstudentsscore: '',
        oralexammaximumscore: '',
        oralexamstudentsscore: '',



    }),
    handleSubmit(values, { resetForm }) {
        resetForm();
        console.log(values)
    }


})(MidTermFormComponent)

export default MidTermForm

Answer 1

I tried by extending yup validation schema. Instead of calling a function in onChange check this code sandbox