Question

我有一个名为“ Display”的组件，该函数具有“ selectRow（param）”功能，当单击“ Row”上的按钮时，将传递给一个“ Row”组件，以在调用“ Row”组件后立即调用，该函数被调用。如何将“ selectRow”功能设置为仅在单击按钮时才能调用？

显示

import Row from './Row';

import {  generateRows, rearrangeCards } from '../helpers';


function Display({ displayDeck }) {

  const [deck, setDeck] = useState(displayDeck);

  const selectRow = (param) => {
    console.log(param)
  }

  let rows =  generateRows(deck);

  return (
    <div>
    {
      Object.keys(rows).map((key, index) => {
        return <Row rowDeck={rows[key].deck} selectRow={selectRow} rowId={rows[key].id} key={index} />
      })
    }
    </div>
  );

}

export default Display;```



***Row***

```import React from 'react';


function Row({ rowDeck, selectRow, rowId }) {

  function handleClick() {
    selectRow(rowId)
  }

  return (
    <div className="rowContainer">
      <button type="button" id="card" onClick={handleClick()} className="rowButton">Shuffle</button>
      {rowDeck.map((card, index) => {
        return (
          <img
            key={index}
            width="100"
            alt={`card: ${card.value}-${card.suit}`}
            src={card.image}
            className="image"
          />
        );
      })}
    </div>
  );
}

export default Row;

Answer 1

此

onClick={handleClick()}

应为：

onClick={handleClick}

传递给onClick事件处理程序的是对函数的引用，该函数将在事件触发时被调用。无需调用{花括号}内部的函数，因为它将立即执行。

Answer 2

onClick={handleClick}

这应该是您的handleClick方法。您不需要onClick内的（），我相信这就是您这样做的结果。请尝试让我知道。

子组件重新调用时调用父函数

2 个答案: