Question

我有一个按钮，出于测试目的，我想向控制台写入数组元素的索引。更具体地说，我在button.js中有一个按钮，该按钮显示在IncomeOutputList数组中的每个数组元素上。单击时，我希望每个按钮将对应的IncomeOutputList数组元素的索引打印到控制台。例如，通过单击下图所示的第二个元素的按钮，我希望控制台显示索引1（第一个元素是最上面的矩形，它是一个空白数组元素）。

这是带有按钮的数组元素的图片，该按钮悬停在每个数组元素的数字上方时出现：

当前，当页面呈现时，数组的所有索引都显示在控制台中，不确定原因。我希望我把问题弄清楚了！

button.js：

import React from 'react';

const Button = ({buttonType, handler}) => (
    <>
        <div className="item__delete">
            <button className={buttonType} onClick={handler}>
                <i className="ion-ios-close-outline"></i>
            </button>
        </div>
    </>
)

export default Button;

ValueOutput.js：

import React from 'react';
import Button from '../buttons/Button';

//move item__value element to left when hovering over it, and make delete button appear

const ValueOutput = ({type, value, handleClick}) => {
    
    return (
        <>
            <div className="right clearfix">
                <div className="item__value">{type} {value}</div>
                <Button buttonType="item__delete--btn" handler={handleClick}/>
            </div>
        </>
    )
}

export default ValueOutput;

IncomeOutput.js：

import React from 'react';
import ValueOutput from './ValueOutput';

const IncomeOutput = ({ desc, type,id, value, handleButton }) => {
    //id = inc-{id}
        return (
            <>
                <div className="item clearfix income" id={id}>
                    <div className="item__description">{desc}</div>
                        <ValueOutput
                            type={type}
                            value={value}
                            handleClick={handleButton}
                        />
                </div>
            </>
        )
    }

export default IncomeOutput;

IncomeOutputList.js：

import React from 'react';
import IncomeOutput from './IncomeOutput';


// list will be list of income objects
const IncomeOutputList = ({ list }) => {

    const handler = (i) => {
        console.log(i);
        console.log('the test');
    }

    return (
        <div className="income__list">
            <div className="income__list--title">INCOME</div>
            {list.map((item, index) => <IncomeOutput 
                                id={item.id} 
                                value={item.incomeValue} 
                                type={item.budgetType} 
                                desc={item.desc} 
                                handleButton={handler(index)} 
                                />
            )}
        </div>
    )
}

Answer 1

您正在传递handler(index)作为事件处理程序。由于这不会返回任何内容，因此您可以有效地传递undefined作为处理程序。您将需要更改处理程序方法以返回函数：

const handler = (i) => {
    return () => {
        console.log(i);
        console.log('the test');
    };
};

您还可以将对处理程序的调用包装在一个函数buttonHandle={() => handler(index)}中-这实际上是同一件事。

Answer 2

问题在于，遇到代码后，handler函数会立即执行。

只要您拥有()，该函数就会在遇到时立即执行。它不是在等待事件触发。

这是您可以做的：

handleButton={() => handler(index)}

反应：按钮单击未写入控制台

2 个答案: