"在反應功能組件中使用內聯箭頭功能"

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)}
/>