Aquí te presento un componente funcional de ReactJS que podría utilizarse para contar las palabras por minuto que tipea un usuario en un juego:

import React, { useState, useEffect } from 'react';

const TypingGame = () => {
  const [words, setWords] = useState(['hello', 'world', 'react', 'javascript']); // Palabras disponibles para el juego
  const [currentWord, setCurrentWord] = useState(''); // Palabra actual que se muestra en pantalla
  const [inputValue, setInputValue] = useState(''); // Valor del input donde el usuario tipea la palabra
  const [score, setScore] = useState(0); // Puntaje inicial
  const [timeLeft, setTimeLeft] = useState(60); // Tiempo inicial

  // Función que cambia la palabra actual y reinicia el valor del input
  const changeWord = () => {
    const randomIndex = Math.floor(Math.random() * words.length);
    setCurrentWord(words[randomIndex]);
    setInputValue('');
  };

  // Función que se ejecuta cada vez que el usuario hace submit en el input
  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputValue === currentWord) {
      // Si la palabra ingresada es correcta, sumamos su longitud al puntaje actual
      setScore(score + currentWord.length);
      // Cambiamos la palabra actual por otra aleatoria
      changeWord();
    }
  };

  // Función que se ejecuta cada segundo y reduce el tiempo restante en uno
  useEffect(() => {
    if (timeLeft > 0) {
      const timerId = setTimeout(() => {
        setTimeLeft(timeLeft - 1);
      }, 1000);
      return () => clearTimeout(timerId);
    }
  }, [timeLeft]);

  // Función que se ejecuta al montar el componente y elige una palabra aleatoria para empezar
  useEffect(() => {
    changeWord();
  }, []);

  return (
    <div>
      <h2>Typing Game</h2>
      <p>Current word: {currentWord}</p>
      <form onSubmit={handleSubmit}>
        <label>
          Type the word:
          <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
        </label>
        <button type="submit">Submit</button>
      </form>
      <p>Score: {score}</p>
      <p>Time left: {timeLeft}</p>
    </div>
  );
};

export default TypingGame;
Este componente utiliza el hook useState para manejar el estado de la palabra actual, el valor del input, el puntaje y el tiempo restante. También utiliza los hooks useEffect para ejecutar funciones al montar el componente y cada vez que cambia el tiempo restante. El juego funciona cambiando la palabra actual cada vez que el usuario ingresa la palabra correcta, sumando la longitud de la palabra al puntaje actual. Al final del tiempo, se muestra el puntaje obtenido.
นี่คือส่วนประกอบ ReactJS ที่ใช้งานได้ซึ่งสามารถใช้เพื่อนับคำต่อนาทีที่ผู้ใช้พิมพ์ในเกม: import React, { useState, useEffect } จาก 'react'; const TypingGame = () => { const [คำ, setWords] = useState(['hello', 'world', 'react', 'javascript']); // คำที่มีสำหรับเกม const [currentWord, setCurrentWord] = useState(''); // คำปัจจุบันที่แสดงบนหน้าจอ const [inputValue, setInputValue] = useState(''); // ค่าของอินพุตที่ผู้ใช้พิมพ์คำว่า const [score, setScore] = useState(0); // const คะแนนเริ่มต้น [timeLeft, setTimeLeft] = useState (60); // เวลาเริ่มต้น // ฟังก์ชั่นที่เปลี่ยนคำปัจจุบันและรีเซ็ตค่าอินพุต const changeWord = () => { const RandomIndex = Math.floor(Math.random() * word.length); setCurrentWord(คำ[ดัชนีสุ่ม]); setInputValue(''); }; // ฟังก์ชั่นที่ถูกดำเนินการทุกครั้งที่ผู้ใช้ส่งอินพุต const handleSubmit = (e) => { e.preventDefault(); if (inputValue === currentWord) { // หากคำที่ป้อนถูกต้อง เราจะเพิ่มความยาวให้กับคะแนนปัจจุบัน setScore(score + currentWord.length); // เราเปลี่ยนคำปัจจุบันเป็นคำสุ่มหนึ่ง changeWord(); } }; // ฟังก์ชั่นที่ทำงานทุกวินาทีและลดเวลาที่เหลือลงหนึ่งครั้ง useEffect(() => { if (timeLeft > 0) { const timerId = setTimeout(() => { setTimeLeft(timeLeft - 1); }, 1000) ; return () => clearTimeout(timerId); } }, [timeLeft]); // ฟังก์ชั่นที่ดำเนินการเมื่อติดตั้งส่วนประกอบและเลือกคำสุ่มเพื่อเริ่ม useEffect(() => { changeWord(); }, []); return ( <div> <h2>การพิมพ์เกม</h2> <p>คำปัจจุบัน: {currentWord}</p> <form onSubmit={handleSubmit}> <label> พิมพ์คำ: <input type="text" value ={inputValue} onChange={(e) => setInputValue(e.target.value)} /> </label> <button type="submit">ส่ง</button> </form> <p>คะแนน: { คะแนน</p> <p>เวลาที่เหลือ: {timeLeft}</p> </div> ); }; ส่งออก TypingGame เริ่มต้น; ส่วนประกอบนี้ใช้ตะขอ useState เพื่อจัดการสถานะของคำปัจจุบัน ค่าอินพุต คะแนน และเวลาที่เหลืออยู่ นอกจากนี้ยังใช้ตะขอ useEffect เพื่อดำเนินการฟังก์ชันต่างๆ เมื่อติดตั้งส่วนประกอบและเมื่อใดก็ตามที่เวลาที่เหลืออยู่เปลี่ยนแปลง เกมทำงานโดยการเปลี่ยนคำปัจจุบันทุกครั้งที่ผู้ใช้ป้อนคำที่ถูกต้อง โดยเพิ่มความยาวของคำลงในคะแนนปัจจุบัน เมื่อสิ้นสุดเวลา คะแนนที่ได้รับจะปรากฏขึ้น
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence