您好，我想知道為什么只有像下面這樣的正常功能有效而箭頭功能無效。
const Form = () =>{
const [text, setText] = useState("");
const handle=(e)=>{
setText(e.target.value);
}
const alertText = (e) =>{
console.log(text);
alert(text);
}
return(
<>
<input onChange={handle}></input>
<button onClick={alertText}>submit</button>
<h1>{text}</h1>
</>
)}
使用箭頭函式<input onChange={()=>handle}>
根本不起作用，我不知道它們之間有什么區別。
uj5u.com熱心網友回復：
組件期望 onChange 作為一個函式，當用戶更改輸入值時將呼叫該函式。
注意：它在語法上是正確的，但句柄函式不會執行。
當你這樣做
<input onChange={handle}></input>
// it's equivalent to
<input onChange={(e)=>{ setText(e.target.value); }}></input>
但是當你這樣做時
<input onChange={()=>handle}></input>
// it's equivalent to
<input onChange={(e) => ()=>{ setText(e.target.value);}}></input>
uj5u.com熱心網友回復：
好吧，那是因為如果你在元素上使用箭頭函式，你必須像這樣呼叫它：
<input onChange={(e)=>handle(e)}>
uj5u.com熱心網友回復：
你可以做：
<input onChange={(e)=>handle(e)}>
您沒有將事件傳遞給句柄函式
uj5u.com熱心網友回復：
<input onChange={()=>handle}>
在上述情況下，onChange 被分配了一個函式，其中有一個陳述句handle。于是onclick陳述句handle就運行了。沒發生什么事。
<input onChange={()=>handle()}>
在上述情況下，onChange 被分配了一個函式，其中有一個陳述句handle()。所以 onclick 句柄被執行。
<input onChange={handle}>
在上述情況下，onChange 被分配了句柄函式。所以 onclick 句柄被執行。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/417654.html
標籤：
上一篇：如何在Gatsby.js中為GoogleAnalytics添加多個跟蹤ID？
下一篇：react中剛剛上傳的渲染檔案