javascript - 在动态 block React 中对父元素使用 ref

Question

你能告诉我如何正确地对父 block 进行引用吗

我只知道在virtualDom中使用选择器是错误的，我需要使用refs

如何在 addTag 和 editTags 方法中使用 refs 替换选择器？

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 及更高版本，您可以像这样使用 refs:

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 是出于另一个目的在 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