javascript - 如何在 react 中的一组元素中识别单个 div 元素？

Question

我有一个 React 应用程序，其中包含用于创建一些卡片的 Div 元素列表。每张卡片都有“阅读更多”按钮来展开和折叠一个段落，我每次点击鼠标都会切换它。 我的问题是，对于每次点击，它都会展开所有卡片中的段落，而不是我点击的卡片中的段落。所以我无法识别点击的(这个)卡片。

组件:

class BidCard extends Component {
    constructor(props) {
        super(props);
        this.state = {
            readMoreOpen: false,
        }
    }

    readMore() {
        this.setState({ readMoreOpen: !this.state.readMoreOpen })
    }

    render() {

        const { articles } = this.props;

        return (
            articles.map(article => {
                return (
                    <div className="projectCardRoot" key={article.id}>
                        <div className="projectCardMainLogin">
                            <div className="projectCardMiddle">
                                <p className={this.state.readMoreOpen ? 'openFullParagraph' : 'closeFullParagraph'} id="projectCardDesc">{article.description}</p>
                                <div className="cardReadMore desktopDiv" onClick={this.readMore.bind(this)}>Read more</div>
                            </div>
                        </div>
                    </div>
                )
            })
        )
    }
}

export default BidCard;

我该如何解决这个问题？

Answer 1

您可以将扩展卡的 id 保存到状态并在渲染元素时检查它:

class BidCard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      readMoreOpen: [],  // Use array here
    }
  }

  // Add card id to the expanded array if not already there, otherwise remove it
  readMore = (id) => {
    this.setState(state => {
      if (state.readMoreOpen.includes(id)) {
        return {readMoreOpen: state.readMoreOpen.filter(readId => readId !== id)}
      }
     return {readMoreOpen: [...state.readMoreOpen, id]}
    })
  }

  render() {

    const { articles } = this.props;

    return (
      articles.map(article => {
        return (
          <div className="projectCardRoot" key={article.id}>
            <div className="projectCardMainLogin">
              <div className="projectCardMiddle">
                {/*Check if the item is in expanded items array */}
                <p className={this.state.readMoreOpen.includes(article.id) ? 'openFullParagraph' : 'closeFullParagraph'} id="projectCardDesc">{article.description}</p>
                <div className="cardReadMore desktopDiv" onClick={() => this.readMore(article.id)}>Read more</div>
              </div>
            </div>
          </div>
        )
      })
    )
  }
}