處理事件做出反應

Question

我見過處理無國籍功能組件的事件兩種方法：

1）

const SomeInputComponent = ({ onTextChange }) => (

    <input type='text' onChange={(e) => onTextChange (e.target.value)} /> 

); 

2）

const SomeInputComponent = ({ onTextChange }) => { 

    const handleChange = (e) => { 
    onTextChange(e.target.value); 
    } 

    return (
    <input type='text' onChange={handleChange} /> 
); 
}; 

哪一個更可取？什麼是優點和缺點？

Answer 1

我的看法是，它主要是關於可讀性，可重用性等就個人而言，我嘗試使用選項2，但如果它真的很簡單的組件和我永遠不會再使用該處理程序有時我去選擇1

但是，我對此並不滿意，並試圖堅持第二種選擇。爲什麼？因爲我經常認爲我不會重複使用處理程序，或者我認爲它總是一行代碼，但是最終我會重寫它，因爲我正在重用它，或者我正在向其中添加更多代碼（通常是簡單的console.log）。這浪費了時間。

所以我是一致的。始終使用選項2.