reactjs - 根据当前的 SELECT OPTION VALUE 设置标题 onSubmit - 反应

Question

我在 youtube 上找到了有关如何在 youtube 上创建反应测验应用程序的教程链接到教程

我正在尝试在提交表单时根据当前的 Select Option Value 设置标题。目前，我仅在选择不同选项时才设法更改标题。

import React, { useState, useEffect, useRef } from "react";
import "./App.css";
import axios from "axios";

import FlashcardList from "./components/FlashcardList";

function App() {
  const [flashcards, setFlashcards] = useState([]);
  const [categories, setCategories] = useState([]);
  const [title, setTitle] = useState("General Knowledge");

  const categoryEl = useRef();
  const amountEl = useRef();

  useEffect(() => {
    axios.get("https://opentdb.com/api_category.php").then((res) => {
      setCategories(res.data.trivia_categories);
    });
  }, []);

  function decodeString(str) {
    const textArea = document.createElement("textarea");
    textArea.innerHTML = str;
    return textArea.value;
  }

  function handleSubmit(e) {
    e.preventDefault();
    axios
      .get("https://opentdb.com/api.php", {
        params: {
          amount: amountEl.current.value,
          category: categoryEl.current.value,
        },
      })
      .then((res) => {
        setFlashcards(
          res.data.results.map((questionItem, index) => {
            const answer = decodeString(questionItem.correct_answer);
            const options = [...questionItem.incorrect_answers, answer];
            return {
              id: `${index} - ${Date.now()}`,
              question: decodeString(questionItem.question),
              answer: answer,
              options: options.sort(() => Math.random() - 0.5),
            };
          })
        );
      });
  }

  function getTitle(e) {
    setTitle(e.target.options[e.target.selectedIndex].text);
  }

  return (
    <>
      <form className="header" onSubmit={handleSubmit}>
        <div className="form-group">
          <label htmlFor="category">Category</label>
          <select id="category" ref={categoryEl} onChange={getTitle}>
            {categories.map((category) => {
              return (
                <option value={category.id} key={category.id}>
                  {category.name}
                </option>
              );
            })}
          </select>
        </div>
        <div className="form-group">
          <label htmlFor="amount">Number Of Questions</label>
          <input
            type="number"
            id="amount"
            min="1"
            step="1"
            defaultValue={10}
            ref={amountEl}
          />
        </div>
        <div className="form-group">
          <button className="btn">Generate</button>
        </div>
      </form>
      <div className="container">
        <h1 className="title">{title}</h1>
        <FlashcardList flashcards={flashcards} />
      </div>
    </>
  );
}

export default App;

代码

现场演示

标签： reactjs

Answer 1

您可以在获取类别后立即设置类别。可以只使用第零个元素来设置标题。

useEffect(() => {  axios.get("https://opentdb.com/api_category.php").then((res) => {
  setCategories(res.data.trivia_categories);
  setTitle(res.data.trivia_categories[0]);
});
}, []);