我目前正在学习 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
最佳答案
感谢这个美丽平台上其他人的帮助,我为将来可能遇到此问题的其他人找到了答案。所以,我所做的是:
我添加了一个新状态:
const [value, setValue] = useState('')
.我在
input
中使用了它像这样的功能:
const input = (e) => {
setAns(e.target.value)
>>> setValue(e.target.value)
}
已添加
setValue('')
到verify
的最后函数,在 if 语句之外。已添加
value={value}
至<input>
的属性。
关于javascript - 单击不在 React.js 中表单内部的按钮后如何重置输入值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63826571/