亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React 句柄更改功能無需參數事件即可工作

React 句柄更改功能無需參數事件即可工作

侃侃爾雅 2023-12-14 16:40:21
我創建了三個組件:<MyInputComponent>擴展了material ui組件<Input><MyInputComponent>通過接受作為 propsonInputTyping并將其傳遞給onChangeof來處理 onChange of<MyInputComponent><App>渲染并<Input>傳遞onInputTyping給<Input>函數handleTypying代碼: https: //codesandbox.io/s/upbeat-bas-u0rj4內部輸入我有:const Input: React.FC<Props> = (props: Props) => {  const { onInputTyping } = props;  return (    <MyInputComponent      onChange={(event) => onInputTyping && onInputTyping(event)}    />  );};內部應用程序我有:export default function App() {  const handleTyping = (event: React.ChangeEvent<HTMLInputElement>) => {    console.log(event.target.value);  };  return (    <div className="App">      <Input onInputTyping={(event) => handleTyping(event)} />      <br />      <Input onInputTyping={() => handleTyping(event)} /> <-- This still console.log the event, but why?      <br />      <Input onInputTyping={handleTyping} /> <-- This still console.log the event, but why?    </div>  );問題: 我不明白為什么<Input>里面的最后兩個App能夠console.log用戶鍵入的事件。event我在第一個中傳遞了only Input,然后event將其傳遞給handleTyping。例子:<Input onInputTyping={(event) => handleTyping(event)} />但在第二個和第三個中,<Input>我不會將任何傳遞event給handleTyping. handleTyping那么,即使我沒有event向它傳遞任何內容,怎么可能能夠 console.log(event) 呢?
查看完整描述

1 回答

?
墨色風雨

TA貢獻1853條經驗 獲得超6個贊

因為有一個全局事件變量。如果省略函數的參數,event將引用該參數(在第二個示例中)。巧合的是,React.ChangeEvent通過參數接收的 和持有 an 的全局變量HTMLEvent具有相同的屬性,這就是它“起作用”的原因。

你的第三個例子與你的第一個例子沒有太大不同,我認為最好通過刪除它周圍的所有 React 并只顯示函數來說明:

?function realHandler(event) {

? ?//...

?}


?function callback(handler) {

? ? handler(event); // this is doing exactly the same thing as the following line

? ? realHandler(event);?

?}


?callback(realHandler);


查看完整回答
反對 回復 2023-12-14
  • 1 回答
  • 0 關注
  • 161 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號