反應何時在道具中使用函數？

Question

在 React 中，何時使用 Props 中的函數？

例如，在下面的代碼中，有時您不會在 prop 中使用函數，但有時會使用。

import React, { useState } from 'react';

const IterationSample = () => {
  const input = React.createRef();
  const [names, setNames] = useState(
    [
      { id: 1, text: 'John' },
      { id: 2, text: 'Jake' },
      { id: 3, text: 'JJ' },
      { id: 4, text: 'Jesus' }

    ])
  const [inputText, setInputText] = useState('');
  const [nextId, setNextId] = useState(5);

  const onChange = e => setInputText(e.target.value);
  const onRemove = id => {
    const nextNames = names.filter(name => name.id !== id);
    setNames(nextNames);
  }
  const namesList = names.map(name => <li key={name.id} onDoubleClick={() => onRemove(name.id)}>{name.text}</li>);
  const onClick = () => {
    const nextNames = names.concat({
      id: nextId,
      text: inputText
    });
    setNextId(nextId + 1);
    setNames(nextNames);
    setInputText('');
    input.current.focus();
  }

  const onEnter = (e) => {
    if (e.key === 'Enter') {
      onClick();
    }
  }


  return (
    <>
      <input ref={input} value={inputText} onChange={onChange} onKeyPress={onEnter} />
      <button onClick={onClick} >Add</button>
      <ul>{namesList}</ul>
    </>
  );
};


export default IterationSample;

在這里，您在onDoubleClick={() => onRemove(name.id)使用 ()=> 一個函數，但在onKeyPress={onEnter}或onChange={onChange}

那么什么時候在 props 中使用函數呢？

Answer 1

您的所有三個示例都使用一個函數：

onDoubleClick={() => onRemove(name.id)}
onKeyPress={onEnter}
onChange={onChange}

唯一的區別是其中一個需要為函數指定一個參數（ onRemove ），而另外兩個則不需要。

如果屬性傳遞的參數（在本例中為onKeyPress和onChange ）正是函數所需要的，那么您只需按原樣引用該函數。 但是，如果您需要自定義傳遞給函數的內容（在本例中為onRemove ），您可以將其包裝在一個新函數中以包含該自定義。

Answer 2

當您需要傳遞額外的參數（ event本身除外）時，您基本上會使用它。 前任。 當您想在您的情況下傳遞id ，您可以：

onClick={(e) => onRemove(name.id)}
//or together with the event
onClick={(e) => onRemove(e, name.id)}

否則當你不需要在函數內部傳遞參數，或者你只需​​要傳遞event你可以這樣寫：

onClick={onRemove}

Answer 3

這個

onClick={onClick}

相當於

onClick={(e) => onClick(e)}

對於第一種情況，您將函數本身作為道具傳遞。

對於第二種情況，您正在定義一個內聯函數，該函數使用參數(e)調用onClick函數。

通常，您可以將函數本身作為道具傳遞，除非您想在調用函數時添加其他參數。 例如，

onClick={(e) => onClick(e, name.id)}

Answer 4

:)

David 和 Ertan 的回答非常好且完整。 我再補充兩件事。

首先，考慮到 reactjs 的良好實踐和性能，不要在渲染中使用箭頭函數。

根據 eslint 規則eslint 規則：

A bind call or arrow function in a JSX prop will create a brand new function on every single render. This is bad for performance, as it may cause unnecessary re-renders if a brand new function is passed as a prop to a component that uses reference equality check on the prop to determine if it should update.

其次，如果您需要自定義傳遞給函數的內容（在本例中on Remove ），您可以使用 lodash 的替代方法： partial

官方文檔

這是您的代碼示例：

 const namesList = names.map(name => <li key={name.id} onDoubleClick={ _.partial(this.onRemove, name.id)} > {name.text} </li> );

祝你有美好的一天

Answer 5

只是為了澄清一下，因為您似乎沒有得到您正在尋找的對初學者友好的答案：

諸如“onKeyPress”或“onChange”之類的東西帶有隱式事件。 這意味着什么？ 這意味着無論你綁定到那個組件的任何函數，它都會被一個“事件”觸發，這將是你輸入的任何函數的參數。 事實上，如果你查看函數本身，你會注意到他們接受一個參數，'e' 表示事件。 因此，如果有幫助，您可以將其中一些命令視為說

onKeyPress={()=>onEnter(keyPressEvent)}

事件中會有一些有用的數據，但通常我們唯一關心的是用戶按下了哪個鍵，或者（如果發生更改）輸入的新內容是什么。

對於像 onDoubleClick 這樣的東西，你給它一些額外的數據。 您可以使用 javascript 做一些花哨的工作來識別雙擊的內容及其屬性，但這很麻煩，會添加不必要的代碼，並且往往會混淆您正在編碼的任何內容的意圖。 因此，最終只提供您想要的功能會更容易。