использовать ref для родительских элементов в динамических блоках React

Question

Подскажите, пожалуйста, как правильно сделать ссылку на родительский блок

Я просто знаю, что использование селекторов в virtualDom неправильно, мне нужно использовать refs

Как сделать ссылкизаменить селекторы в методах addTag и editTags?

class Home extends Component {

    editTags = (e) => {
        e.target.closest('.card-list__item--tags').classList.add('active');
    }

    addTag = (e) => {
        let tagFieldValue = e.target.closest('.card-list__item_edit').querySelector('input');
        let indexItem = e.target.closest('.card-list__item').id;
        let cardList = this.props.cards;
        cardList[indexItem].tags = cardList[indexItem].tags + ', ' + tagFieldValue.value;
        this.props.onEditTags(cardList);
        tagFieldValue.value = '';
        e.target.closest('.card-list__item--tags').classList.remove('active');
    }




    render(){
        let cardList = this.props.cards;

        return(
            <div className={'card-list'}>
                {
                    cardList.length && cardList.map((card, index) =>
                        <div id={index} className={'card-list__item'}>
                            <div className={'card-list__item_row card-list__item--tags'}>
                                <div className={'tags-wrap'} onDoubleClick={this.editTags}>
                                    {
                                        card.tags.split(', ').map((tag) =>
                                            <span>{tag}</span>
                                        )
                                    }
                                </div>
                                <div className={'card-list__item_edit'}>
                                    <input id={index} type="text" placeholder={'Add tags'}/>
                                    <button onClick={this.addTag}>Add Tag</button>
                                </div>

                            </div>
                        </div>
                    )
                }
            </div>
        )
    }
}


export default Home;

Answer 1

Предполагая, что вы используете React 16.10.0 и выше, вы можете использовать ссылки вроде этого:

class Home extends React.Component {
  constructor(props) {
    super(props)

    this.cardListRef = React.createRef();
  }

  addTag = (e) => {
    const cardListRefNode = this.cardListRef.current;
    console.log(cardListRefNode); // card-list node will be available here
    let tagFieldValue = e.target.closest('.card-list__item_edit').querySelector('input');
    let indexItem = e.target.closest('.card-list__item').id;
    let cardList = this.props.cards;
    cardList[indexItem].tags = cardList[indexItem].tags + ', ' + tagFieldValue.value;
    this.props.onEditTags(cardList);
    tagFieldValue.value = '';
    e.target.closest('.card-list__item--tags').classList.remove('active');
  }

  render(){
        let cardList = this.props.cards;

        return(
            <div className={'card-list'} ref={this.cardListRef}>
                {
                    cardList.length && cardList.map((card, index) =>
                        <div id={index} className={'card-list__item'}>
                            <div className={'card-list__item_row card-list__item--tags'}>
                                <div className={'tags-wrap'} onDoubleClick={this.editTags}>
                                    {
                                        card.tags.split(', ').map((tag) =>
                                            <span>{tag}</span>
                                        )
                                    }
                                </div>
                                <div className={'card-list__item_edit'}>
                                    <input id={index} type="text" placeholder={'Add tags'}/>
                                    <button onClick={this.addTag}>Add Tag</button>
                                </div>

                            </div>
                        </div>
                    )
                }
            </div>
        )
    }

Но, как я вижу, вы используете селекторы для получения значения от ввода, для очистки ввода ипоменять классы. Ссылки были созданы в React для другой цели (https://reactjs.org/docs/refs-and-the-dom.html#when-to-use-refs).

Похоже, в вашем случае лучше использовать состояние компонента для таких задач. Вы можете получить значения из входных данных с событием onChange, а затем вы можете сохранить ихзначения в состоянии компонента. Также было бы лучше переместить «card-list__item» в отдельный компонент и переключать активный класс в нем также в зависимости от его состояния. Вы можете найти больше примеров того, как работать с формами в Reactздесь: https://reactjs.org/docs/forms.html