Блог

У меня есть кнопка, и в целях тестирования я хочу записать в консоль индекс элемента массива. Более конкретно, у меня есть кнопка в 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>
    )
}
  

Вы передаете handler(index) в качестве своего обработчика событий. Поскольку это ничего не возвращает, вы фактически передаете undefined в качестве своего обработчика. Вы захотите изменить свой метод обработчика, чтобы возвращать функцию:

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

Вы также можете просто обернуть свой вызов обработчика в функцию, buttonHandle={() => handler(index)} — это фактически то же самое.

Проблема в том, что handler функция выполняется сразу при обнаружении кода.

Всякий раз, когда у вас есть () функция, она будет выполняться сразу же при обнаружении. Он не ожидает запуска события.

Вот что вы можете сделать:

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