处理事件做出反应

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.