0

Всем добрый день. Застрял в коде в одном месте уже как пару дней.

Имеется в наличии ребёнок 2 уровня - иконка (птица) по клику на которую необходимо передать событие родителю (компонент 1 уровня), в котором необходимо передать это событие дальше своему родителю добавив значение id.

компонент 2 уровня (ребёнок 2 уровня)

class IconCheck extends React.Component {
constructor (props) {
    super(props)
}

render() {
    return (
        <i onClick={this.props.checkChange} className={'fa fa-check ' + (this.props.isCheck? 'iVisible' : 'iInvisible')}></i>
    );
}

}

Компонент 1 уровня (ребёнок 1 уровня)

return (
        <ul className={this.props.forUlClass.length > 0? 'ul visible' : 'ul unvisible'}>
            {this.props.arrForRender.map((el) => 
            <li key={el.id}>
                <IconCheck check={el.id} isCheck={el.check} checkChange={this.props.eventCLickOnBird(el.id)}/>
            </li>)}
        </ul>
    );

Главный компонент (родитель)

return (
        <div>
            <Ul eventCLickOnBird={this.checkChange}  arrForRender={arrFromTodoStateWithFilter} forUlClass={this.state.objInfo}/>
        </div>
    );

Получается что в текущем виде, у меня вне зависимости от клика вызывается в ребёнке 1 уровня props и запускается функция в главном родителе. HELP

1 ответ 1

0

К сожалению никто не ответил, однако метод тыка удалось поправить положение вещей.

Суть был в том, что при попытке вызвать props у ребёнка 1 уровня и передавая ему аргумент, это автоматически вызывало функцию у родителя.

Поэтому была предпринята попытка оформить всё виде функции без аргумента чтобы она не запускалась сразу это имеет следующий вид:

checkChange={() => this.props.eventCLickOnBird(el.id)}

таким образом теперь всё срабатывает по клику на элементе ребёнка 2 уровня :)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.