javascript - 单击不在 React.js 中表单内部的按钮后如何重置输入值

Question

我目前正在学习 React.js，并且正在尝试制作一个小问答游戏。代码总体上需要进一步完善，但我目前想要实现的是，我希望我的输入字段在单击按钮后重置它的值。我尝试在 onChange 函数内使用 e.target.reset() 清除文本，该函数在状态内设置输入值，但这有点愚蠢，因为它会抛出错误开始打字后向左和向右。我还尝试用一个单独的函数做一些技巧，将 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(/"/g, "''").replace(/'/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

感谢这个美丽平台上其他人的帮助，我为将来可能遇到此问题的其他人找到了答案。所以，我所做的是:

1. 我添加了一个新状态:const [value, setValue] = useState('') .

2. 我在 input 中使用了它像这样的功能:

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

1. 已添加 setValue('')到 verify 的最后函数，在 if 语句之外。

2. 已添加 value={value}至 <input>的属性。