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函数？

1 个答案: