"在反应功能组件中使用内联箭头功能"

Question

我知道在反应组件中使用内联箭头函数是不好的做法。

但是当我的函数有参数时我该怎么办？

例如，在CustomInput<\/code>我有一个处理焦点状态的函数并有一个参数。 我在 onBlur 和 onFocus 中使用它并将参数传递给它。

const CustomInput = () => {
  const [focused, setFocused] = useState(false);

  const handleFocus = (isFocus) => {
    /**
     * Some Conditions to check
     */
    setFocused(isFocus);
  };

  return (
    <input
      onFocus={() => handleFocus(true)}
      onBlur={() => handleFocus(false)}
    />
  );
};

Answer 1

这实际上取决于您的公司\/项目使用的标准和约定。 有时，允许使用内联箭头函数，有时定义函数是严格的规则，在这种情况下，您通常使用handleEvent<\/code>模板。

对于内联函数声明的严格规则，您有几种解决方案：

1. 通过避免使用布尔陷阱<\/a>来完全避免这个问题。<\/li>
2. 重命名handleFocus<\/code> ，然后创建调用该函数的handleFocus<\/code>和handleBlur<\/code>函数。<\/li>
3. 使用handleFocus<\/code>和handleBlur<\/code>将调用的Reducer<\/a> ，每个都有不同的操作。 （在我看来，对于这种小规模问题，这不是最好的解决方案）<\/li><\/ol>"

Answer 2

输入焦点将是真或假。 您可以只将处理函数传递给侦听器，并且因为您知道总是只有两种状态，您可以简单地使用当前状态布尔值的反转来更新状态。

如果您认为需要传递其他参数，我倾向于将数据附加到元素上的数据属性，然后从处理程序中的数据集中解构它们。

 const { useEffect, useState } = React; function Example() { const [focus, setFocus] = useState(false); function handleFocus(e) { const { text } = e.target.dataset; console.log(text); setFocus(!focus); } useEffect(() => { console.log(`Focused? ${focus}`); }, [focus]); return ( <input data-text="This is an example" onFocus={handleFocus} onBlur={handleFocus} /> ); }; // Render it ReactDOM.render( <Example />, document.getElementById("react") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>

Answer 3

我不知道我是否正确理解了你的问题，但这是我的看法：

它只是关于如何传递参数并仍然通过返回另一个函数来让处理程序工作

const CustomInput = () => {
  const [focused, setFocused] = useState(false);

  const handleFocus = (isFocus) => () => {
    /**
     * Some Conditions to check
     */
    setFocused(isFocus);
  };

  return (
    <input
      onFocus={handleFocus(true)}
      onBlur={handleFocus(false)}
    />
  );
};

Answer 4

将this<\/code>绑定到null<\/code>后使用该函数，例如：

<input
      onFocus={handleFocus.bind(null,true)}
      onBlur={handleFocus.bind(null,false)}
/>