如何使用 withformik 和 antd 组件调用 OnChange 函数？

Question

这里我在 Formik Field 上调用 onChange 函数但它没有调用？如何在 Formik 字段上调用自定义函数？

这是我在 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");
  }
};

我的表单是在渲染下创建的，并在 StudentScore 字段上编写了一个 onChange 函数。但它不叫？如何调用这个函数？

  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

我尝试通过扩展 yup 验证模式。而不是在 onChange 中调用函数检查这个 code sandbox

如何使用 withformik 和 antd 组件调用 OnChange 函数？

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

reactjs

antd

yup

formik