React Bootstrap Form.Control 未采用默认值

Question

我正在尝试制作一个模式，您可以在单击特定学生的按钮时打开它，并尝试为该学生添加成绩。 但是我遇到了一个问题-每当我尝试从下拉列表中打出差的分数（这是默认分数）时，它都不会被考虑在内，也不会与学生的分数（取自学生的分数）一起添加到表中.firstSemester 在这种情况下）。 我不明白为什么当我尝试立即输入默认值时不考虑默认值（否则更改为任何其他等级，然后更改为可怜的工作......）？ 你能建议对此进行改进吗？ （顺便说一句，我是一个初学者，所以代码质量不高，对此我很抱歉）。

const GradesTable= ({selectedClass, displayedSubj}) => {
    let students = selectedClass.students;
    const {t} = useTranslation();
    const [isInEditMode, updateIsInEditMode] = useState(false);
    const secondTermStartsAt = new Date('2021-02-01T22:00:00.000+0000');
    const [currentUser, updateUser] = useState(null);
    const [isOpenModal, openModal] = useState(false);
    const [studentNames, setStudentNames] = useState(undefined);
    const [studentGrade, setGrade] = useState(undefined);
    const [description, setDescription] = useState(undefined);

    let allGrades = [
        {key : "2", name : t('journal table.grades.poor')},
        {key : "3", name : t('journal table.grades.average')},
        {key : "4", name : t('journal table.grades.good')},
        {key : "5", name : t('journal table.grades.very good')},
        {key : "6", name : t('journal table.grades.excellent')},
    ];

    const setOpenModal = (value, names) => {
        openModal(value);
        setStudentNames(names);
    }

    useEffect(
        () => {
            if(!currentUser){
                const user = AuthService.getCurrentUser();

                if (user) {
                    updateUser(user);
                }
            }

            if(displayedSubj && students){
                setTableData(populateTableData(students));
            }},
        [displayedSubj, students, currentUser]
    );

    const flatmapArr = (arr) => {
        return [].concat.apply([],arr);
    }

    const saveGrade = (value) => {
        var grade = {
            id: null,
            date: new Date(),
            description: description,
            mark: studentGrade,
            subject: getCurrentSubject(),
            byWhom: currentUser.teacher
        };
        
        var currentStudent = tableData.filter(student => student.names === studentNames)[0];
        var student = students.filter(stud => stud.id === currentStudent.id);
        student[0].grades.push(grade);
        try {
            StudentService.updateStudent(student[0]);
        } catch(error) {
            alert(error.stack);
        }
        setOpenModal(false);
    }

    const handleGradeChange = (grade) => {
        setGrade(grade);
        assignGradeValueToStudent(grade);
    }
  
    const assignGradeValueToStudent = (grade) => {
        var currentStudent = tableData.filter(student => student.names === studentNames)[0];
        if(isEmpty(currentStudent.firstSemester)) {
            currentStudent.firstSemester = currentStudent.firstSemester + grade;
        } else if(currentStudent.firstSemester.substring(currentStudent.firstSemester.length-1, currentStudent.firstSemester.length) === studentGrade) {
            currentStudent.firstSemester = currentStudent.firstSemester.substring(0, (currentStudent.firstSemester.length-1));
            if(isEmpty(currentStudent.firstSemester)) {
                currentStudent.firstSemester = currentStudent.firstSemester + grade;
            } else {
                currentStudent.firstSemester = currentStudent.firstSemester + " " + grade;
            }
        } else {
            currentStudent.firstSemester = currentStudent.firstSemester + " " + grade;
        }
    }

    const setCloseModal = () => {
        debugger;
        var currentStudent = tableData.filter(student => student.names === studentNames)[0];
        if(!isEmpty(currentStudent.firstSemester)) {
            currentStudent.firstSemester = currentStudent.firstSemester.substring(0, (currentStudent.firstSemester.length-1));
        }
        setOpenModal(false, undefined);
    }

    return(
        <div>
            {isOpenModal && 
                <Modal.Dialog>
                    <Modal.Header>
                        <Modal.Title>
                            {t('journal table.adding a grade')} <b><i>{studentNames}</i></b>
                        </Modal.Title>
                    </Modal.Header>

                    <Modal.Body>
                        <Form.Row>
                        <Form.Group as={Col} md="3" controlId="empty" />
                        <Form.Group as={Col} md="6" controlId="exampleForm.ControlSelect1">
                                <Form.Label>{t('journal table.grade')}</Form.Label>
                                <Form.Control
                                name='grade' 
                                as="select" 
                                defaultValue={''}
                                onChange={(event) => handleGradeChange(event.target.value)}>
                                    {allGrades && allGrades.map(grade => 
                                        <option key={grade.key} value={grade.key}>
                                            {grade.name}
                                        </option>
                                    )}
                                </Form.Control>
                            </Form.Group>
                        </Form.Row>

                        <Form.Row>
                            <Form.Group as={Col} md="2" controlId="empty" />
                            <Form.Group as={Col} md="8" controlId="exampleForm.ControlInput1">
                                <Form.Label>{t('journal table.description')}</Form.Label>
                                <Form.Control
                                name='description'
                                type="text"
                                onChange={(event) => setDescription(event.target.value)}/>
                            </Form.Group>
                        </Form.Row>

                    </Modal.Body>

                    <Modal.Footer>
                        <Button variant="secondary" onClick={() => setCloseModal(false, undefined)}>
                            {t('journal table.close')}
                        </Button>
                        <Button variant="primary" onClick={(val) => saveGrade(val)}>
                            {t('journal table.save changes')}
                        </Button>
                    </Modal.Footer>
                </Modal.Dialog>
            }
            {!isOpenModal &&
                <div>
                    <BootstrapTable
                        keyField="id"
                        data={tableData}
                        columns={columns}
                        hover
                    />
                </div>
            }
        </div>
    );
}

export default GradesTable;```

Answer 1

控制您的输入。

用空字符串初始化 state：

const [studentGrade, setGrade] = useState('');

将“defaultValue”替换为“value”属性并传递当前的 state：

<Form.Control
    ...
    value={studentGrade}
    ...
/>