javascript - React 何时使用 Props 中的函数？

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)，您可以将其包装在一个新函数中以包含该自定义内容。