0

在这里,我在 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
4

1 回答 1

1

我尝试通过扩展 yup 验证模式。不要在 onChange 中调用函数,而是检查此代码沙箱

于 2019-03-15T09:41:51.063 回答