как установить динамическое значение в опции выбора на основе формы - PullRequest
0 голосов
/ 02 апреля 2019

У меня есть две формы, одна - средняя, ​​другая - окончательная.эти две формы обернуты в одну форму.а также я объявляю один вариант выбора.эта опция выбора содержит несколько значений (например, A +, A, B три значения). Если одна форма доступна для редактирования.тогда я хочу, чтобы установить значение в опции выбора динамически.

here my select option is declared with key value pairs
const studentStatus = [{ key: 'Inprogress', value: 'Inprogress' }, { key: 'pass', value: 'pass' }, { key: 'fail', value: 'fail' }, { key: 'retest', value: 'retest' }]

I am adding GradeForm with two forms like MidTerm and FinalTerm and wrapped withformik


     const GradeForm = (MidTerm, FinalTerm, handleSubmit) => (
            <div style={{ color: '#808000' }}>
                <Form handleSubmit={handleSubmit}>
                    <Card title="MidTerm Form"
                        align="left"
                        size="small"
                        type="inner"
                        bordered={false}>
                        <Card.Grid style={gridStyle}>
                            <MidTermForm MidTerm={MidTerm} />
                        </Card.Grid>
                    </Card>
                    <Card title="FianlTerm Form"
                        align="left"
                        size="small"
                        type="inner"
                        bordered={false}>
                        <Card.Grid style={gridStyle}>
                            <FinalTermForm FinalTerm={FinalTerm} />
                        </Card.Grid>
                    </Card>
                    <Row style={{ marginTop: 10 }}>
                        <Col span={14}>
                            <Field
                                label="Student Status"
                                name="studentstatus"
                                component={AntSelect}
                                selectOptions={studentStatus}
                                style={{ width: 200 }}
                                formitemlayout={formItemLayout}
                            />
                        </Col>
                    </Row>
                    <Row style={{ padding: 0, margin: 0 }}>
                        <Col align="right"><b>* %of the total grade for the year</b></Col>
                    </Row>
                    <FormItem {...tailFormItemLayout}>
                        <Row>
                            <Col span={10} push={2}>
                                <Button type="primary" style={{ width: 120 }}>Cancel</Button>
                            </Col>
                            <Col span={8} pull={1}>
                                <Button type="primary" htmlType="submit">
                                    Submit Scores
                                </Button>
                            </Col>
                        </Row>
                    </FormItem>
                </Form>
            </div >
        )


        const GForm = withFormik({

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

        export default GForm

// Это одна из моих форм MidTerm

 const MidTermForm = (MidTerm) => (
        <div>
            <Row>
                <Col span={10} style={{ color: '#FFA500' }}><b>Topic</b></Col>
                <Col span={6} style={{ color: '#FFA500' }}><b>MaximuScore*</b></Col>
                <Col span={8} style={{ color: '#FFA500' }}><b>Student's Score*</b></Col>
            </Row>
            <Row style={{ marginTop: 12 }}>
                <Col span={10}>Written Exam</Col>
                <Col span={6} pull={1}>
                    <Field
                        name="writtenexammaxscore"
                        component={AntInput}
                        type="text"
                        style={{ width: 200 }}
                        onKeyUp={maxTotalScore}
                        //readOnly={MidTerm}
                    />
                </Col>
                <Col span={6} push={1} >
                    <Field
                        name="writtenexamstudentsscore"
                        component={AntInput}
                        type="text"
                        style={{ width: 200 }}
                        onKeyUp={StudentTotalScore}
                        //readOnly={MidTerm}
                    />
                </Col>
            </Row>
            <Row>
                <Col span={10} >Oral Exam and Class Participation</Col>
                <Col span={6} pull={1} >
                    <Field
                        name="oralexammaximumscore"
                        component={AntInput}
                        type="text"
                        style={{ width: 200 }}
                        onKeyUp={maxTotalScore}
                       //readOnly={MidTerm}
                    />
                </Col>
                <Col span={6} push={1} >
                    <Field
                        name="oralexamstudentsscore"
                        component={AntInput}
                        type="text"
                        style={{ width: 200 }}
                        onKeyUp={StudentTotalScore}
                       //readOnly={MidTerm}
                    />
                </Col>
            </Row>
            <Row>
                <Col span={10} >Homework/Projects</Col>
                <Col span={6} pull={1}>
                    <Field
                        name="homeworkandprojectsmaxscore"
                        component={AntInput}
                        type="text"
                        style={{ width: 200 }}
                        onKeyUp={maxTotalScore}
                    />
                </Col>
                <Col span={6} push={1} >
                    <Field
                        name="homeworkandprojectsstudentsscore"
                        component={AntInput}
                        type="text"
                        style={{ width: 200 }}
                        onKeyUp={StudentTotalScore}
                    />
                </Col>
            </Row>
        </div>
    )

И это другая форма, как форма FinalTerm.моя форма - Среднесрочная форма, статус студента изменен на Inprogess, независимо от того, является ли он окончательным, статус студента изменен на прохождение, отказ или повторное тестирование

    const FinalTermForm = (FinalTerm) => (
            <div>
                <Row>
                    <Col span={10} style={{ color: '#FFA500' }}><b>Topic</b></Col>
                    <Col span={6} style={{ color: '#FFA500' }}><b>MaximuScore*</b></Col>
                    <Col span={8} style={{ color: '#FFA500' }}><b>Student's Score*</b></Col>
                </Row>
                <Row style={{ marginTop: 12 }}>
                    <Col span={10}>Written Exam</Col>
                    <Col span={6} pull={1}>
                        <Field
                            name="finalwrittenexammaxscore"
                            component={AntInput}
                            type="text"
                            style={{ width: 200 }}
                            onKeyUp={FinalmaxTotalScore}
                            //readOnly={FinalTerm}
                        />
                    </Col>
                    <Col span={6} push={1} >
                        <Field
                            name="finalwrittenexamstudentsscore"
                            component={AntInput}
                            type="text"
                            style={{ width: 200 }}
                            onKeyUp={FinalStudentTotalScore}
                            //readOnly={FinalTerm}
                        />
                    </Col>
                </Row>
                <Row>
                    <Col span={10} >Oral Exam and Class Participation</Col>
                    <Col span={6} pull={1} >
                        <Field
                            name="finaloralexammaximumscore"
                            component={AntInput}
                            type="text"
                            style={{ width: 200 }}
                            onKeyUp={FinalmaxTotalScore}
                            //readOnly={FinalTerm}
                        />
                    </Col>
                    <Col span={6} push={1} >
                        <Field
                            name="finaloralexamstudentsscore"
                            component={AntInput}
                            type="text"
                            style={{ width: 200 }}
                            onKeyUp={FinalStudentTotalScore}
                           //readOnly={FinalTerm}
                        />
                    </Col>
                </Row>
                <Row>
                    <Col span={10} >Homework/Projects</Col>
                    <Col span={6} pull={1}>
                        <Field
                            name="finalhomeworkandprojectsmaxscore"
                            component={AntInput}
                            type="text"
                            style={{ width: 200 }}
                            onKeyUp={FinalmaxTotalScore}
                            //readOnly={FinalTerm}
                        />
                    </Col>
                    <Col span={6} push={1} >
                        <Field
                            name="finalhomeworkandprojectsstudentsscore"
                            component={AntInput}
                            type="text"
                            style={{ width: 200 }}
                            onKeyUp={FinalStudentTotalScore}
                            //readOnly={FinalTerm}
                        />
                    </Col>
                </Row>
            </div>
        )
...