如何将下拉菜单选中项成功保存到Firebase文档中

• 自定义下拉组件DropdownYear没有将内部选中值透传给父组件：父组件传入了onChange回调，但DropdownYear内部的select触发选择动作后，仅更新了自身内部state，没有调用父组件传入的回调方法同步值，导致父组件的year状态始终为空
• 提交数据时未包含year字段：现有代码仅包含从Firebase拉取数据的逻辑，写数据时没有将year状态加入提交参数

1. 调整DropdownYear组件，透传选中值 #

修改组件内部的handleChange方法，将选中值同步给父组件：

// DropdownYear组件内的handleChange方法调整
handleChange = (event) => {
  // 保留原有更新自身state的逻辑
  this.setState({ value: event.target.value });
  // 新增：调用父组件传入的onChange回调，传递选中值
  if (this.props.onChange) {
    this.props.onChange(event);
  }
}

额外注意：React自定义组件名要求首字母大写，需要将导出的dropdownYear改为DropdownYear，避免渲染异常

2. 补充提交数据的year字段 #

在你原有向Firebase写数据的逻辑中，把year状态加入提交的字段中，示例参考：

// 你原有提交学生信息的逻辑，补充year字段
const submitStudentInfo = async () => {
  await addDoc(studentsCollectionRef, {
    name: name, // 你原本可正常提交的文本字段
    year: year, // 新增下拉菜单选中的年份值
    // 其余原有字段保持不变
  })
}

可选优化：支持编辑场景回显 #

如果需要在编辑资料时回显已保存的年份，给DropdownYear补充value属性绑定父组件的year状态：

<DropdownYear
  className={classes.yearDropdown}
  value={year} // 新增绑定父组件的year状态
  onChange={(event) => {
    setYear(event.target.value)
  }}
></DropdownYear>

同时将DropdownYear内select的value属性修改为this.props.value || this.state.value即可。

内容的提问来源于stack exchange，提问作者StormChaser