当我在childComponent中提交表单时，我的页面在ReactJS中刷新

我有一个测验应用程序，您可以选择问题数量、难度等。提交后，您将直接进入测验屏幕。我有一个名为应用程序的父组件和名为开始屏幕的子组件。我想更改子组件中的一些状态并提交它们。求和后，我将看到测验测试屏幕。在父组件中，我有一个名为start的状态。当我将start从false更改为true时，我将看到测验屏幕。我的问题是，当我在子组件中将start更改为true时，它会刷新页面。因此我看不到测验屏幕

父组件

import './App.css';
import React, { useState, useEffect } from 'react';
import QuestionGrid from './components/QuestionGrid';
import StartScreen from './components/StartScreen';
function App() {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);
  const [amount, setAmount] = useState("10");
  const [category, setCategory] = useState("23");
  const [difficulty, setDifficulty] = useState('easy');
  const [start, setStart] = useState(false);

  useEffect(() => {
    fetch(
      `https://opentdb.com/api.php?amount=${amount}&category=${category}&difficulty=${difficulty}&type=multiple`
    )
      .then((res) => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result.results);
        },

        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      );
  }, [amount,category,difficulty]);
  console.log(error);
  console.log(isLoaded);

  return start === true ? (
    <div className="App">
      <QuestionGrid isLoaded={isLoaded} items={items} />
    </div>
  ) : (
    <div>
      <StartScreen amount={(e)=>setAmount(e)} category={(e)=>setCategory(e)} difficulty={(e)=>setDifficulty(e)}/>
    </div>
  );
}

export default App;

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

export default function startScreen(props) {


    
  return (
    <section className="mt-3">
      <header className="text-center">
        <h2>Welcome to QUIZ</h2>
      </header>
      <div className="col-sm-6 m-auto">
          <form action="">
        <input
        onChange={(e)=>(props.amount(e.target.value))}
        placeholder="Select amount of questions"
          type="number"
          name="trivia_amount"
          id="trivia_amount"
          class="form-control"
          min="1"
          max="50"
        ></input>
        <select
          class="form-select form-select-md "
          aria-label=".form-select-lg example"
          onChange={(e)=>(props.category(e.target.value))}

        >
          <option selected>Select the category</option>
          <option value="any">Any Category</option>
          <option value="9">General Knowledge</option>
          <option value="10">Entertainment: Books</option>
          <option value="11">Entertainment: Film</option>
          <option value="12">Entertainment: Music</option>
          <option value="13">Entertainment: Musicals &amp; Theatres</option>
          <option value="14">Entertainment: Television</option>
          <option value="15">Entertainment: Video Games</option>
          <option value="16">Entertainment: Board Games</option>
          <option value="17">Science &amp; Nature</option>
          <option value="18">Science: Computers</option>
          <option value="19">Science: Mathematics</option>
          <option value="20">Mythology</option>
          <option value="21">Sports</option>
          <option value="22">Geography</option>
          <option value="23">History</option>
          <option value="24">Politics</option>
          <option value="25">Art</option>
          <option value="26">Celebrities</option>
          <option value="27">Animals</option>
          <option value="28">Vehicles</option>
          <option value="29">Entertainment: Comics</option>
          <option value="30">Science: Gadgets</option>
          <option value="31">Entertainment: Japanese Anime &amp; Manga</option>
          <option value="32">
            Entertainment: Cartoon &amp; Animations
          </option>{' '}
        </select>
        <select
          class="form-select form-select-md mb-5"
          aria-label=".form-select-lg example"
          onChange={(e)=>(props.difficulty(e.target.value))}

        >
          <option selected>Select the difficulty</option>
          <option value="any">Any Difficulty</option>
          <option value="easy">Easy</option>
          <option value="medium">Medium</option>
          <option value="hard">Hard</option>
        </select>
       

        <button type="submit" value="true" className="btn btn-danger col-sm-4 m-auto d-flex justify-content-center"  onClick={(e)=>(alert(e.target.value))}>
          Submit
        </button>
        </form>
      </div>
    </section>
  );
}

import'/App.css'；
从“React”导入React，{useState，useffect}；
从“./components/QuestionGrid”导入QuestionGrid；
从“./components/StartScreen”导入StartScreen；
函数App（）{
const[error，setError]=useState（null）；
const[isLoaded，setIsLoaded]=useState（false）；
const[items，setItems]=useState（[]）；
const[amount，setAmount]=useState（“10”）；
const[category，setCategory]=useState（“23”）；
常量[难度，设置难度]=useState（'easy'）；
const[start，setStart]=useState（false）；
useffect（（）=>{
取回(
`https://opentdb.com/api.php?amount=${amount}&category=${category}&difficity=${difficity}&type=multiple`
)
.然后（（res）=>res.json（））
.那么(
（结果）=>{
setIsLoaded（真）；
设置项（result.results）；
},
（错误）=>{
setIsLoaded（真）；
设置错误（错误）；
}
);
}，[金额、类别、难度]；
console.log（错误）；
console.log（已加载）；
返回start==真(
) : (
setAmount（e）}category={（e）=>setCategory（e）}难度={（e）=>setcombiness（e）}/>
);
}
导出默认应用程序；

这是我的子组件

import './App.css';
import React, { useState, useEffect } from 'react';
import QuestionGrid from './components/QuestionGrid';
import StartScreen from './components/StartScreen';
function App() {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);
  const [amount, setAmount] = useState("10");
  const [category, setCategory] = useState("23");
  const [difficulty, setDifficulty] = useState('easy');
  const [start, setStart] = useState(false);

  useEffect(() => {
    fetch(
      `https://opentdb.com/api.php?amount=${amount}&category=${category}&difficulty=${difficulty}&type=multiple`
    )
      .then((res) => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result.results);
        },

        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      );
  }, [amount,category,difficulty]);
  console.log(error);
  console.log(isLoaded);

  return start === true ? (
    <div className="App">
      <QuestionGrid isLoaded={isLoaded} items={items} />
    </div>
  ) : (
    <div>
      <StartScreen amount={(e)=>setAmount(e)} category={(e)=>setCategory(e)} difficulty={(e)=>setDifficulty(e)}/>
    </div>
  );
}

export default App;

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

export default function startScreen(props) {


    
  return (
    <section className="mt-3">
      <header className="text-center">
        <h2>Welcome to QUIZ</h2>
      </header>
      <div className="col-sm-6 m-auto">
          <form action="">
        <input
        onChange={(e)=>(props.amount(e.target.value))}
        placeholder="Select amount of questions"
          type="number"
          name="trivia_amount"
          id="trivia_amount"
          class="form-control"
          min="1"
          max="50"
        ></input>
        <select
          class="form-select form-select-md "
          aria-label=".form-select-lg example"
          onChange={(e)=>(props.category(e.target.value))}

        >
          <option selected>Select the category</option>
          <option value="any">Any Category</option>
          <option value="9">General Knowledge</option>
          <option value="10">Entertainment: Books</option>
          <option value="11">Entertainment: Film</option>
          <option value="12">Entertainment: Music</option>
          <option value="13">Entertainment: Musicals &amp; Theatres</option>
          <option value="14">Entertainment: Television</option>
          <option value="15">Entertainment: Video Games</option>
          <option value="16">Entertainment: Board Games</option>
          <option value="17">Science &amp; Nature</option>
          <option value="18">Science: Computers</option>
          <option value="19">Science: Mathematics</option>
          <option value="20">Mythology</option>
          <option value="21">Sports</option>
          <option value="22">Geography</option>
          <option value="23">History</option>
          <option value="24">Politics</option>
          <option value="25">Art</option>
          <option value="26">Celebrities</option>
          <option value="27">Animals</option>
          <option value="28">Vehicles</option>
          <option value="29">Entertainment: Comics</option>
          <option value="30">Science: Gadgets</option>
          <option value="31">Entertainment: Japanese Anime &amp; Manga</option>
          <option value="32">
            Entertainment: Cartoon &amp; Animations
          </option>{' '}
        </select>
        <select
          class="form-select form-select-md mb-5"
          aria-label=".form-select-lg example"
          onChange={(e)=>(props.difficulty(e.target.value))}

        >
          <option selected>Select the difficulty</option>
          <option value="any">Any Difficulty</option>
          <option value="easy">Easy</option>
          <option value="medium">Medium</option>
          <option value="hard">Hard</option>
        </select>
       

        <button type="submit" value="true" className="btn btn-danger col-sm-4 m-auto d-flex justify-content-center"  onClick={(e)=>(alert(e.target.value))}>
          Submit
        </button>
        </form>
      </div>
    </section>
  );
}

import React，{useState，useffect}来自“React”；
导出默认功能startScreen（道具）{
返回(
欢迎参加小测验
（props.amount（e.target.value））}
占位符=“选择问题数量”
type=“编号”
name=“琐事金额”
id=“琐事金额”
class=“表单控制”
min=“1”
max=“50”
>
（props.category（e.target.value））}
>
选择类别
任何类别
常识
娱乐：书籍
娱乐：电影
娱乐：音乐
娱乐：音乐剧和剧院
娱乐：电视
娱乐：电子游戏
娱乐：棋盘游戏
科学与自然
科学：计算机
科学：数学
神话学
体育
地理
历史
政治
艺术
名人
动物
车辆
娱乐：漫画
科学：小玩意
娱乐：日本动漫
娱乐：卡通和动画
{' '}
（道具难度（如target.value））}
>
选择难度
有困难吗
容易的
中等
硬的
（警报（e.target.value））}>
提交
);
}

您需要使用

preventDefault

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

export default function startScreen(props) {
    const handleSubmit = useCallback((event) => {
        event.preventDefault()
        alert(event.target.value)
    }, [])

    return (
        <section className="mt-3">
            <header className="text-center">
                <h2>Welcome to QUIZ</h2>
            </header>
            <div className="col-sm-6 m-auto">
                <form action="">
                    <input
                        onChange={(e) => (props.amount(e.target.value))}
                        placeholder="Select amount of questions"
                        type="number"
                        name="trivia_amount"
                        id="trivia_amount"
                        class="form-control"
                        min="1"
                        max="50"
                    ></input>
                    <select
                        class="form-select form-select-md "
                        aria-label=".form-select-lg example"
                        onChange={(e) => (props.category(e.target.value))}

                    >
                        <option selected>Select the category</option>
                        <option value="any">Any Category</option>
                        <option value="9">General Knowledge</option>
                        <option value="10">Entertainment: Books</option>
                        <option value="11">Entertainment: Film</option>
                        <option value="12">Entertainment: Music</option>
                        <option value="13">Entertainment: Musicals &amp; Theatres</option>
                        <option value="14">Entertainment: Television</option>
                        <option value="15">Entertainment: Video Games</option>
                        <option value="16">Entertainment: Board Games</option>
                        <option value="17">Science &amp; Nature</option>
                        <option value="18">Science: Computers</option>
                        <option value="19">Science: Mathematics</option>
                        <option value="20">Mythology</option>
                        <option value="21">Sports</option>
                        <option value="22">Geography</option>
                        <option value="23">History</option>
                        <option value="24">Politics</option>
                        <option value="25">Art</option>
                        <option value="26">Celebrities</option>
                        <option value="27">Animals</option>
                        <option value="28">Vehicles</option>
                        <option value="29">Entertainment: Comics</option>
                        <option value="30">Science: Gadgets</option>
                        <option value="31">Entertainment: Japanese Anime &amp; Manga</option>
                        <option value="32">
                            Entertainment: Cartoon &amp; Animations
          </option>{' '}
                    </select>
                    <select
                        class="form-select form-select-md mb-5"
                        aria-label=".form-select-lg example"
                        onChange={(e) => (props.difficulty(e.target.value))}

                    >
                        <option selected>Select the difficulty</option>
                        <option value="any">Any Difficulty</option>
                        <option value="easy">Easy</option>
                        <option value="medium">Medium</option>
                        <option value="hard">Hard</option>
                    </select>


                    <button type="submit" value="true" className="btn btn-danger col-sm-4 m-auto d-flex justify-content-center" onClick={handleSubmit}>
                        Submit
                    </button>
                </form>
            </div>
        </section>
    );
}

import React，{useState，useffect，useCallback}来自'React'；
导出默认功能startScreen（道具）{
const handleSubmit=useCallback（（事件）=>{
event.preventDefault（）
警报（event.target.value）
}, [])
返回(
欢迎参加小测验
（props.amount（e.target.value））}
占位符=“选择问题数量”
type=“编号”
name=“琐事金额”
id=“琐事金额”
class=“表单控制”
min=“1”
max=“50”
>
（props.category（e.target.value））}
>
选择类别
任何类别
常识
娱乐：书籍
娱乐：电影
娱乐：音乐
娱乐：音乐剧和剧院
娱乐：电视
娱乐：电子游戏
娱乐：棋盘游戏
科学与自然
科学：计算机
科学：数学
神话学
体育
地理
历史
政治
艺术
名人
动物
车辆
娱乐：漫画
科学：小玩意
娱乐：日本动漫
娱乐：卡通和动画
{' '}
（道具难度（如target.value））}
>
选择难度
有困难吗
容易的
中等
硬的
提交