0

Есть ли способ управления списками в духе реакта? Например у каждого элемента в списке есть метод, который вызывает колбэк своего родителя, как при этом родитель узнает, какой именно элемент к нему обращается? Конечно я могу свой костыль сделать) Но если есть специальный способ, хотелось бы его узнать)) На оф сайте ничего такого не нашёл

Просто вот даже через props к key обратиться нельзя, поэтому я просто прописываю number и к нему обращаюсь) Это и есть мой костыль)) Но опять же, хотелось бы сделать красиво)

2 ответа 2

1

Например каждому элементу передавать ID и использовать его в callback:

class Element extends React.Component {
    onClick = () => {
        this.props.onElementAction(this.props.elementNumber);
    }

    render() {
        return (
            <button onClick={this.onClick} />
        );
    }
}

а в родителе делать действия в зависимости от полученного ID:

class ElementsList extends React.Component {
    onElementAction = (elementNumber) => {
        someAction(elementNumber);
    }

    render() {
        return (
            <div>
                <Element 
                    elementNumber = {1}
                    onElementAction = {this.onElementAction}
                />
                <Element 
                    elementNumber = {2}
                    onElementAction = {this.onElementAction}
                />
                <Element 
                    elementNumber = {3}
                    onElementAction = {this.onElementAction}
                />
            </div>
        );
    }
}

если в качестве элементов используются html-элементы, то идентификаторы можно передавать через аттрибут data-. Например:

в рендере:

<input
    data-record-id={1}
    onChange={this.onChange}
/>
<input
    data-record-id={2}
    onChange={this.onChange}
/>
<input
    data-record-id={3}
    onChange={this.onChange}
/>

в обработчике:

onChange = (event) => {
    let recordId = event.target.dataset.recordId;
    someAction(recordId);
}
1

Допустим нам нужно подсветить элемент при клике. Для этого мы заведем переменную в state - activeLi. И при клике будем туда помещать id элемента, а выделять уже при рендре. В потомке можно будет просто вешать this.props.onClick на нужный нам элемент, или передать сразу все свойства {...this.props}

<ul>
   {items.map((Li, i) => 
      <Li 
        key={i}
        onClick={() => this.setState({activeLi: i})}
        style={{background: this.state.activeLi === i? 'firebrick': 'transparent'}}
      />)
   }
</ul>

Ваш ответ

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

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