如何将子名称道具传递给父数组

Question

我有一个从我的 React 应用程序中的父组件映射的子对象列表。

当单击子项时，我需要将该项的 props.name 通过 handleClick 函数推送到父组件中的 selectedItems 数组。

我怎样才能做到这一点？

function Parent() {
  let selectedItems = [];
  const result = Data.filter((e) => selectedItems.includes(e.id));

  return (
    <div className="App">
      <main className="products-grid flex flex-wrap">
        {Data.map((item, i) => {
          return <Child 
          key={item.id} 
          name={item.name} />
        })}
      </main>
    </div>
  );
}
export default App

const Child = (props) => {
  const [clickCount, setClickCount] = useState(0);

  function handleClick() {
    setClickCount(prevClickCount => prevClickCount + 1);
  }

  return (
    <div 
    className="product"
    onClick={() => handleClick()}
    >
      <p>{props.name}</p>
      <p>{clickCount > 0 ? <p>Selected: {clickCount}</p> : <p>Not Selected</p>}</p>
      <img src={props.img} alt="" />
    </div>
  );
}

Answer 1

我建议对父组件中的“selectedItems”使用挂钩，以便在名称更改时触发重新渲染。

您可以使用 props 将函数从父组件传递给子组件。

下面我已将“addToSelectedItems”函数传递给子级并在 handleClick 方法中触发它。

const Parent = () => {

  const [selectedItems, setSelectedItems] = useState([]);
  
  function addToSelectedItems(name){
     setSelectedItems([...selectedItems, name]);
  }

  return (
    <div className="App">
      <main className="products-grid flex flex-wrap">
        {Data.map((item, i) => {
          return <Child 
          key={item.id} 
          name={item.name}
          addToSelectedItems={addToSelectedItems}
          />
        })}
      </main>
    </div>
  );
}
export default App

const Child = (props) => {
  const [clickCount, setClickCount] = useState(0);

  function handleClick(name) {
    setClickCount(prevClickCount => prevClickCount + 1);
    props.addToSelectedItems(name);
  }

  return (
    <div 
    className="product"
    onClick={(props.name) => handleClick(props.name)}
    >
      <p>{props.name}</p>
      <p>{clickCount > 0 ? <p>Selected: {clickCount}</p> : <p>Not Selected</p>}</p>
      <img src={props.img} alt="" />
    </div>
  );
}

Answer 2

我会做这样的事情，但我还没有测试过，它可能需要一些微调

function Parent() {
  let selectedItems = [];
  const result = Data.filter((e) => selectedItems.includes(e.id));
  const [clickCount, setClickCount] = useState(0);
  
  function handleClick(name) {
    setClickCount(prevClickCount => prevClickCount + 1);
    selectedItem.push(name)
  }
  
  return (
    <div className="App">
      <main className="products-grid flex flex-wrap">
        {Data.map((item, i) => {
          return <Child 
          key={item.id} 
          name={item.name}
          clickCount={clickCount}
          handleClick={handleClick} />
        })}
      </main>
    </div>
  );
}
export default App;

const Child = (props) => {
  let { handleClick, name, clickCount, img } = props

  return (
    <div 
    className="product"
    onClick={() => handleClick(name)}
    >
      <p>{name}</p>
      <p>{clickCount > 0 ? <p>Selected: {clickCount}</p> : <p>Not Selected</p>}</p>
      <img src={img} alt="" />
    </div>
  );
}

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