javascript - 我可以仅在特定条件下添加 React 输入事件处理程序吗？

Question

我只想在条件为真时在我的元素上添加 onFocus 事件处理程序。现在，我希望能够对 onFocus 本身进行三元运算，所以像这样:

<input
  type='text'
  className='some-class'
  value={value}
  onFocus={useTheOnFocus ? evt => onFocusHandler(evt) : null}
  onChange={evt => onChangeHandler(evt.target.value)}
/>

然而，这不起作用并会产生一系列错误和警告:

Uncaught TypeError: handler.apply is not a function

Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

我知道另一种方法是在它自己的三元标记中用 onFocus 写两次输入标签，另一个没有它。但我想以更简洁的方式来做。是否有另一种更简单、更简洁的方法来完成这项工作？

Answer 1

你可以添加这个

onFocus={useTheOnFocus ? onFocusHandler : undefined}

或设置处理程序

onFocus={onFocusHandler}

并检查处理程序中的条件

onFocusHandler = (ev) => {
   if(!condition) {
      return null;
   }
   // your code
}