如何使整数列表单击具有相应 id 的元素？

Question

我有一个 id（整数）列表，并且有多个组件。 在向我的 API 发出请求后，该组件会收到一个应该已经处于活动状态的 ID 列表。 我想模拟对与数组中具有相同 id 的每个元素的单击。 我知道我可以使用 refs 来做到这一点，但我不明白如何使它与元素列表一起工作。

这是我的代码：

import React, { Component } from 'react'
import InterestBox from './InterestBox'
import Axios from 'axios'

export class InterestList extends Component {

    constructor(props) {
        super(props);
        this.state = {pinterests: []}
    }

    componentDidMount() {
        Axios.get('http://localhost:8000/api/interests')
        .then((success) => {
            this.setState({pinterests: success.data.data.interests});
        })
    }

    componentDidUpdate(prevProps) {
        console.log(JSON.stringify(prevProps));
        console.log(JSON.stringify(this.props))
        if(this.props.alreadyChecked != prevProps.alreadyChecked) {
            this.props.alreadyChecked.forEach((item) => {
                console.log(item)
            })
        }
    }

    render() {
        return (
            <React.Fragment>
                {Object.keys(this.state.pinterests).map((interest) => {
                    var pinterest = this.state.pinterests[interest];
                    return <InterestBox id={pinterest.id} onClick={this.props.onClick} icon={pinterest.picture_src} title={pinterest.name} />
                })}
            </React.Fragment>
        )
    }
}

export default InterestList

import React, { Component } from 'react'
export class InterestBox extends Component {

    constructor(props) {
        super(props);
        this.images = require('../../img/interests/*.svg');

        this.state = {activated: false};
        this.interest_box_content = React.createRef();
        this.interest_text = React.createRef();
        this.handleClick = this.handleClick.bind(this);
        this.updateDimensions = this.updateDimensions.bind(this);
    }

    handleClick() {
        this.props.handleClick(this.props.id, this.props.title);
        this.setState(prevState => ({
            activated: !prevState.activated
        }))        
    }

    updateDimensions() {
        console.log((window.getComputedStyle(this.refs.interest_box_content).width))
        this.refs.interest_text = (window.getComputedStyle(this.refs.interest_box_content).width)
    }

    render() {
        return (
            <div className="column is-one-fifth-desktop is-half-touch">
                <div className="interest-box">
                    <div className="interest-box-adjuster">
                        <div ref={"interest_box_content"} className={"interest-box-content " + (this.state.activated == true ? 'interest-box-activated' : '')} onClick={this.handleClick}>
                            <img className="interest-icon" src={this.images[this.props.icon]} style={{'height': '50%'}}></img>
                            <i className="activated-icon fas fa-check"></i>
                            <span ref={"interest_text"} className="interest-text">{this.props.title}</span>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default InterestBox

在InterestList“componentDidUpdate”方法中，item的值为整数。 我想使用这个整数来“点击”具有相应“id”的兴趣框。

我怎样才能做到这一点？

Answer 1

您可以在一个 ref 中存储一组元素，如下所示：

constructor(props) {
  super(props);
  this.state = {pinterests: []}
  this.pinterestRefs = React.createRef()
}

...

render() {
        return (
            <React.Fragment>
                {Object.keys(this.state.pinterests).map((interest) => {
                    var pinterest = this.state.pinterests[interest];
                    return <InterestBox id={pinterest.id} onClick={this.props.onClick} icon={pinterest.picture_src} title={pinterest.name} ref={pinterestRef => this.refs.pinterestRefs.push(pinterestRef)} />
                })}
            </React.Fragment>
        )
    }

然后在componentDidMount函数中对每个调用 click 函数：

componentDidMount() {
  if (this.refs.pinterestRefs.length) {
    this.refs.pinterestRefs.forEach(pinterestEl => {
      pinterestEl.click();
    });
  }
}

Answer 2

由于this.pinterestRefs是 ref 而不是数组，因此push方法不可用。 不幸的是，我们没有确定的长度，所以我们不能先发制人地声明 refs。 但是，我们可以将它添加到this.refs对象并将其转换为数组：

export class InterestList extends Component {

    constructor(props) {
        super(props);
        this.state = {pinterests: []}
    }

    componentDidMount() {
        Axios.get('http://localhost:8000/api/interests')
        .then((success) => {
            this.setState({pinterests: success.data.data.interests});
        })
    }

    componentDidUpdate(prevProps) {
        console.log(Object.values(this.refs)); // Array with all refs
        console.log(JSON.stringify(prevProps));
        console.log(JSON.stringify(this.props))
        if(this.props.alreadyChecked != prevProps.alreadyChecked) {
            this.props.alreadyChecked.forEach((item) => {
                console.log(item)
            })
        }
    }

    render() {
        return (
            {/*I'm assuming each item has a unique id, if not, create one*/}
            <React.Fragment>
                {Object.keys(this.state.pinterests).map((interest) => {
                    var pinterest = this.state.pinterests[interest];
                    return <InterestBox id={pinterest.id} onClick={this.props.onClick} ref={pinterest.id} icon={pinterest.picture_src} title={pinterest.name} />
                })}
            </React.Fragment>
        )
    }
}

export default InterestList;