带箭头的 React.js 事件 function 与没有任何 () function

Question

您好，我想知道为什么只有像下面这样的正常功能有效而箭头功能无效。

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}>这样的箭头函数根本不起作用，我不知道它们之间有什么区别。

Answer 1

好吧，那是因为如果你在元素上使用箭头 function 你必须这样称呼它：

<input onChange={(e)=>handle(e)}>

Answer 2

组件期望 onChange 为 function，当用户更改输入值时将调用 function。

注意：语法正确，但句柄 function 不会执行。

当你这样做

<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>

Answer 3

你可以做：

 <input onChange={(e)=>handle(e)}>

您没有将事件传递到句柄 function

Answer 4

 <input onChange={()=>handle}> 

在上述情况下，onChange 被分配了一个 function，其中有一个语句handle 。 所以 onclick 语句handle运行。 什么都没发生。

 <input onChange={()=>handle()}> 

在上述情况下，onChange 被分配了一个 function ，其中有一个语句handle() 。 所以 onclick 句柄被执行。

<input onChange={handle}>

在上述情况下，onChange 被分配了句柄 function。 所以 onclick 句柄被执行。