时间戳

首页 > 解决方案 > 子组件在渲染时调用父函数

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

问题描述

我有一个名为“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;

标签： javascriptreactjsreact-hooks

解决方案

这个

onClick={handleClick()}

应该：

onClick={handleClick}

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

推荐阅读