我有两种形式，一种是中间形式，另一种是最终形式。这两种形式都包装成一种形式。而且我宣布一个选择选项。如果一种形式是可编辑的，则此选择选项包含一些值（例如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
///这是我的形式之一，是
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表单的表单。如果我的表单是Midterm表单，则学生身份更改为Inproges，是否将FinalTerm学生身份更改为通过，失败或重新测试
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>
)