Question

我目前正在学习React.js，并且正在尝试制作一些琐事游戏。总体而言，代码需要进一步完善，但是目前我想要实现的是我希望我的输入字段在单击按钮后重置其值。我尝试使用e.target.reset()函数内的onChange清除文本，该函数在状态内设置输入值，但这有点愚蠢，因为它在开始键入后会向左和向右抛出错误。我还尝试使用单独的函数来完成一些技巧，该函数将ans设置为空字符串，然后将其用作defaultValue/value，但这也不起作用。

我不想为此使用表格，因为每个类似的问题都与表格有关。任何帮助或提示都将不胜感激。

import React, { useState, useEffect } from 'react'
import './Quiz.css';
import { Button } from '@material-ui/core';

function Quiz(props) {

    const [question, setQuestion] = useState('')
    const [category, setCategory] = useState('')
    const [correctAns, setCorrectAns] = useState('')
    const [ans, setAns] = useState('')
    const [options, setOptions] = useState([])



    let url = 'https://opentdb.com/api.php?amount=1&type=multiple'
    useEffect(() => {
        try {
            async function fetcher() {
                const quiz = await fetch(url)
                const res = await quiz.json();
                setCategory(res.results[0].category.replace(":", " ->"));
                setQuestion(res.results[0].question.replace(/&quot;/g, "''").replace(/&#039;/g, "'"));
                setCorrectAns(res.results[0].correct_answer);
                props.setCounter(props.counter)

                const incorrect = res.results[0].incorrect_answers
                const correct = res.results[0].correct_answer
                const concat = incorrect.concat(correct)

                const shuffle = (a) => {
                    for (let i = a.length - 1; i > 0; i--) {
                        const j = Math.floor(Math.random() * (i + 1));
                        [a[i], a[j]] = [a[j], a[i]];
                    }
                    setOptions(a)
                    return a;
                }
                shuffle(concat);
            }
            fetcher(url);
        }
        catch (e) {
            console.log(e)
        }
    }, [url, props])


    const input = (e) => {
        setAns(e.target.value)
    }

    const verify = () => {
        let randomizer = Math.floor(Math.random() * 49)
        if (ans === correctAns) {
            props.setCounter(props.counter + 1)
            url = `https://opentdb.com/api.php?amount=${randomizer}&type=multiple`
        } else {
            props.setCounter(props.counter * 0);
            alert('You lost! All your points are now gone')
            window.location.reload(false)
        }

    }

    return (
        <div className="card">
            Category -> {category}<br /><br />
            Question -> {question} <br /><br />
            <ul>
                <li>I. {options[0]}</li>
                <li>II. {options[1]}</li>
                <li>III. {options[2]}</li>
                <li>IV. {options[3]}</li>
            </ul>
            Your answer: <input type="text" onChange={input} /> <br /> <br />
            <Button variant="contained" color="secondary" onClick={verify} className="btn">
                Answer!
            </Button>

        </div >
    )
}

export default Quiz

Answer 1

在这个漂亮的平台上，感谢其他人的帮助，我为以后可能遇到此问题的任何人找到了答案。所以，我做了以下事情：

我添加了一个新状态：const [value, setValue] = useState('')。
我在input函数内部使用了它，如下所示：

const input = (e) => {
        setAns(e.target.value)
    >>> setValue(e.target.value)
    }

在setValue('')函数的末尾在if语句之外添加了verify。
为value={value}的属性添加了<input>。

单击按钮之后不在React.js表单内的方法如何重置输入值

1 个答案: