亂數產生數學加法題目

上週我們學會了使用按鈕，這星期我們來想想，怎麼利用react產生簡單的一個數學四則運算練習? 首先，我們來想想看怎麼利用亂數產生一個簡單的加法題，應用上週所提到的內容，Add.js的內容:

import "./styles.css";
import { useEffect, useState } from "react";

export default function Add() {
  const [question, setQuestion] = useState(0);

  useEffect(generateQuestion, []);

  function generateQuestion() {
    let firstNum = **Math.floor(Math.random() * 10)**;
    let secondNum = **Math.floor(Math.random() * 10)**;
    setQuestion(firstNum + "+" + secondNum);
  }
  return (
    <div>
      {question}
      <button onClick={generateQuestion}>產生下一題</button>
    </div>
  );
}

App.js把Add.js加進去:

import "./styles.css";
**import Add from "./Add";**

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      **<Add />**
    </div>
  );
}

Input

那要怎麼讓使用者輸入答案呢? 首先加上HTML的input元件:

import "./styles.css";
import { useEffect, useState } from "react";

export default function Add() {
  const [question, setQuestion] = useState(0);

  useEffect(generateQuestion, []);

  function generateQuestion() {
    let firstNum = Math.floor(Math.random() * 10);
    let secondNum = Math.floor(Math.random() * 10);
    setQuestion(firstNum + "+" + secondNum+"=");
  }
  return (
    <div>
      {question}
      **<input type="text" name="answer" />**
      <button onClick={generateQuestion}>產生下一題</button>
    </div>
  );
}

在react裡，並不建議直接去取得DOM的內容，所以，寫法就跟javascript不一樣了。在react裡，則是在輸入時(onChange)就將內容放到state變數(answer)裡，並將value設為state。

首先，我們先增加一個useState()

**const [answer, setAnswer] = useState(0);**

我們增加一個函數，將輸入的內容設定到剛剛的state變數(answer)。

Event

event會接收是onChange預設傳給被呼叫方法的第一個參數，可以改為任何的變數名稱。可以利用console.log(event.target)，就可以看到是取得DOM的元件，再從event.target中取得value，將value放到state裡。

  function onChangeAnswer(event) {
    setAnswer(event.target.value);
  }

設定輸入的值為state變數(answer)，並且在輸入時，呼叫函數

      <input
        type="text"
        name="answer"
        value={answer}
        onChange={onChangeAnswer}
      />