为每个问题创建一个react-select，并包含每个问题的答案

npm install react-select
# 或者
yarn add react-select

import React from 'react';
import Select from 'react-select';

// 假设这是问题和答案选项的数据
const questions = [
  {
    question: '你最喜欢的编程语言是什么？',
    options: [
      { value: 'javascript', label: 'JavaScript' },
      { value: 'python', label: 'Python' },
      { value: 'java', label: 'Java' },
      // ...更多选项
    ],
  },
  {
    question: '你最擅长的技术领域是什么？',
    options: [
      { value: 'frontend', label: '前端开发' },
      { value: 'backend', label: '后端开发' },
      { value: 'fullstack', label: '全栈开发' },
      // ...更多选项
    ],
  },
  // ...更多问题
];

function SurveyForm() {
  return (
    <div>
      {questions.map((q, index) => (
        <div key={index}>
          <p>{q.question}</p>
          <Select options={q.options} />
        </div>
      ))}
    </div>
  );
}

export default SurveyForm;

import React, { useState } from 'react';
import Select from 'react-select';

// ...数据和SurveyForm组件定义...

function SurveyForm() {
  const [answers, setAnswers] = useState({});

  const handleChange = (questionIndex, selectedOption) => {
    setAnswers({
      ...answers,
      [questionIndex]: selectedOption,
    });
  };

  return (
    <div>
      {questions.map((q, index) => (
        <div key={index}>
          <p>{q.question}</p>
          <Select
            options={q.options}
            value={answers[index]}
            onChange={(selectedOption) => handleChange(index, selectedOption)}
          />
        </div>
      ))}
    </div>
  );
}

export default SurveyForm;