子组件在渲染时调用父函数

Question

我有一个名为"Display"的组件，它带有一个函数"selectRow(param("，当单击Row上的按钮时，该函数会传递给要调用的"Row"组件，但一旦呈现了"Row的组件，就会调用该函数。如何将"selectRow"函数设置为仅在单击按钮时调用？

显示

import React, { useState } from 'react';
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;

行

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} 

这应该是您的handleClick方法。你不需要onClick中的((，我相信当你这样做的时候就会发生这种情况。请试着告诉我。

Answer 2

此

onClick={handleClick()}

应该是：

onClick={handleClick}

传递给onClick事件处理程序的是对一个函数的引用，该函数将在事件被触发时被调用。不需要调用{大括号}中的函数，因为它会立即执行。