Javascript 为什么当下拉菜单中的值更改时状态变量变为未定义react

这是我试图创建的表:

当我更改下拉栏的值时，该值变得未定义，我不明白为什么.但最初，当我单击submit时，它会工作，并弹出alert ，其中包含我在this.state中设置的两个默认值.

这是我更改SDG时alert 的外观:

代码如下:

import React from 'react'

class Dropdown extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        sdg: 'SDG 1: No Poverty',
        assignment_type: 1
    };
  
      this.handleSDGChange = this.handleSDGChange.bind(this);
      this.handleAssignmentChange = this.handleAssignmentChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
    
    // Handling all 3 input changes
    handleSDGChange(event) {
      this.setState({sdg: event.target.sdg});
    }

    handleAssignmentChange(event) {
        this.setState({assignment_type: event.target.assignment_type});
    }

    // Handling all 3 input submissions
    handleSubmit(event) {
        console.log(this.state.sdg)
      alert(this.state.sdg + '--- Assignment Type: ' + this.state.assignment_type);
      event.preventDefault();
    }

    render() {
      return (
        <form onSubmit={this.handleSubmit}>
            <label>SDG:</label>
            <select value={this.state.sdg} onChange={this.handleSDGChange}>
              <option value="SDG 1: No Poverty">SDG 1: No Poverty</option>
              <option value="SDG 2: Zero Hunger">SDG 2: Zero Hunger</option>
              <option value="SDG 3: Good Health & Well Being">SDG 3: Good Health & Well Being</option>
            </select>

            <label>Assignment Type:</label>
            <select value={this.state.assignment_type} onChange={this.handleAssignmentChange}>
              <option value="1">1: Discussion Project</option>
              <option value="2">2: PDF Case study</option>
              <option value="3">3: Community Project</option>
            </select>

            <input type="submit" value="Submit" />
        </form>
      );
    }
  }
export default Dropdown