Javascript React:onBlur处理程序/回调未按预期工作-同时调用函数和函数作为引用

示例：

因此，我有一个文本输入react组件，带有

onBlur

。它包含一个

handleBlur

函数和一个传入的

onBlurCallback

函数

他们按照我期望的方式工作

const MyInput = ({ onBlurCallback }) => { ... }

<input onBlur={e => handleBlur(e} />
<input onBlur={onBlurCallback} />

constmyinput=（{onBlurCallback}）=>{…}
把手（e}/>

但当我尝试组合它们时，这就是我遇到问题的地方。我的回调会像我预期的那样启动，但我的把手根本不会启动

<MyInput onBlur={
    (e => {
        handleBlur(e);
    },
    onBlurCallback)
} />

{
车把（e）；
},
（回拨）
} />

---

感觉我错过了一些非常明显的东西。。。任何帮助都会很好

如果你这样做，它应该会起作用

const MyInput = ({handleBlur, onBlurCallback}) => {
  return (
    <input onBlur={e => {
      handleBlur(e);
      onBlurCallback();
    }} />
  )
} 

<MyInput handleBlur={blurHandler} onBlurCallback={blurCallback} />

constmyinput=（{handleBlur，onBlurCallback}）=>{
返回(
{
车把（e）；
onBlurCallback（）；
}} />
)
} 

否则，您应该提供一个更好的代码示例，其中包含确切的

MyInput

定义以及如何使用它。

{
<input
  onBlur={e => {
    handleBlur(e);
    onBlurCallback(e);
  }}
/>

车把（e）；
关于（e）的报告；
}}
/>

这将同时调用回调和处理程序

---

正在工作的演示-

这里有一个快速的沙盒：我的问题是，该解决方案需要定义传递到

onBlurCallback

的参数，否则它会失败。我想我可能误解了什么-但在该链接中有2个

onBlur

示例，以显示我遇到的问题。这似乎是传递

e

的问题。但我不确定有什么解决办法？我猜

onBlurCallback（e）

会起作用-但这似乎不对？我不知道向函数传递参数会有什么问题。您也可以在

handleBlur

内部调用l

onBlurCallback

。这样你就可以说

onBlur=handleBlur