React项目中如何将React Select选中值传入Firebase数据库？

按照以下步骤修改代码即可实现需求：

1. 添加状态存储选中的timeline值 #

在组件内部用useState声明状态，用来保存用户选中的timeline选项：

const [selectedTimeline, setSelectedTimeline] = useState(null);

2. 实现changeHandler函数更新状态 #

定义changeHandler，将用户选中的选项同步到状态中：

const changeHandler = (selectedOption) => {
  setSelectedTimeline(selectedOption);
};

3. 完善handleSubmit函数，将值存入Firebase #

在提交函数中调用Firebase的addDoc方法，把选中的timeline值写入指定集合（示例用jobApplications作为集合名，可自行修改），同时处理提交成功/失败的情况：

const handleSubmit = async (e) => {
  e.preventDefault();
  
  // 校验是否已选择选项
  if (!selectedTimeline) {
    alert('请选择入职时间');
    return;
  }

  try {
    // 向Firebase集合添加文档
    await addDoc(collection(db, 'jobApplications'), {
      startTimeline: selectedTimeline.value // 存储选项的value值，如'one-week'
      // 可在此添加其他表单字段，比如姓名、联系方式等
    });
    navigate('/home'); // 提交成功后跳转页面
  } catch (error) {
    console.error('提交失败:', error);
    alert('提交失败，请稍后重试');
  }
};

4. 完整组件代码整合 #

整合后的完整代码如下：

import React, { useState } from "react"
import Select from 'react-select'
import { db } from '../firebase/config'
import { collection, addDoc } from 'firebase/firestore'
import { useNavigate } from 'react-router-dom'

export default function JobApplication() {
  const navigate = useNavigate();
  const [selectedTimeline, setSelectedTimeline] = useState(null);

  const timeline = [
    { value: 'one-week', label: 'In one week'},
    { value: 'two-weeks', label: 'In two weeks'},
    { value: 'one-month', label: 'Within a month'},
    { value: 'more', label: 'More than a month'},
  ];

  const changeHandler = (selectedOption) => {
    setSelectedTimeline(selectedOption);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    if (!selectedTimeline) {
      alert('请选择入职时间');
      return;
    }

    try {
      await addDoc(collection(db, 'jobApplications'), {
        startTimeline: selectedTimeline.value
      });
      navigate('/home');
    } catch (error) {
      console.error('提交失败:', error);
      alert('提交失败，请稍后重试');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 其他表单字段可在此添加 */}
      <div className="flex flex-col mt-12 items-start">
        <label className="mb-3 text-sm leading-none text-gray-800">When can you start?</label>
        <Select 
          required 
          options={timeline} 
          onChange={changeHandler}
          value={selectedTimeline} // 绑定选中值，让组件同步显示当前选择状态
        />
      </div>
      {/* 提交按钮 */}
      <button type="submit" className="mt-6">提交申请</button>
    </form>
  );
}

注意事项 #

• 给Select组件添加value={selectedTimeline}，让组件成为受控组件，正确显示当前选中状态
• 提交前增加空值校验，避免无效提交
• 记得在组件中初始化navigate实例（之前代码中缺少该步骤）

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