在这里,当我第一次按下搜索按钮时,“用户名”状态没有收到任何数据。 'username' 状态为空,App.js 中的 API 请求失败。我第二次单击同一个按钮时,一切都按预期工作。我如何让它在第一次点击时工作?这里有什么问题?
const Search = ({setInputText, setUsername, inputText, username}) => {
const inputHandler = (e)=> {
setInputText(e.target.value)
}
const searchHandler = (e)=> {
e.preventDefault()
setUsername(inputText)
}
return (
<div>
<form>
<input value={inputText} onChange={inputHandler} type="text"/>
<button onClick={searchHandler}>Search</button>
</form>
</div>
)
}
编辑:在此处添加 App.jsfunction App() {
//States
const [inputText, setInputText] = useState("")
const [username, setUsername] = useState("")
const [stats, setStats] = useState([])
return (
<div className="App">
<h1>Game Stats</h1>
<Search setInputText={setInputText} setUsername={setUsername} inputText={inputText} username={username} setStats={setStats}/>
<Stats stats={stats}/>
</div>
);
}
最佳答案
对我来说帮助类似 <button onClick={(e) => searchHandler(e)}>Search</button>
看完后there
seems that the events where overlaping
关于reactjs - onClick 事件在第一次点击时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64967546/