javascript - 如何将动态值传递给 div 元素然后访问它 - React ？

Question

我正在映射我的所有文件

  _renderItems = files =>
    files
      ? files.map((item, i) => {
          return <ProjectItemUser {...item} key={i} index={i} />;
        })
      : null;

然后我尝试显示它ProjectItemUser

class ProjectItemUser extends Component {
  render() {
    return (
      <div>
        <div className="book_item">
          <div className="book_header">
            <h2>{this.props.name}</h2>
          </div>
          <div className="book_this">
            <div className="book_author">{this.props.subject}</div>

            <div className="book_bubble">
              <strong>Study: </strong> {this.props.study}
            </div>

            <div className="book_bubble">
              <strong>Grade: </strong> {this.props.grade}
            </div>

            <FontAwesomeIcon icon="trash" id="trash" />
          </div>
        </div>
      </div>
    );
  }
}

这基本上显示了所有文件，每个文件都是它自己的单独行。我想在每次迭代时为 div 元素分配值，这样我就可以控制单击了哪个文件。

我可以通过以下方式访问我的 ID:this.props._id

这应该使用 refs 来完成吗？如果是的话，怎么做？

Answer 1

您应该将 onClick 函数作为参数传递

 _renderItems = files =>
    files
      ? files.map((item, i) => {
          return <ProjectItemUser {...item} key={i} index={i} onClick={() => { console.warn(item) } />;
        })
      : null;


class ProjectItemUser extends Component {
  render() {
    return (
      <div>
        <div className="book_item">
          <div className="book_header">
            <h2>{this.props.name}</h2>
          </div>
          <div className="book_this">
            <div className="book_author">{this.props.subject}</div>

            <div className="book_bubble">
              <strong>Study: </strong> {this.props.study}
            </div>

            <div className="book_bubble">
              <strong>Grade: </strong> {this.props.grade}
            </div>

            <FontAwesomeIcon icon="trash" id="trash" />

            <Button onClick={this.props.onClick} label="Click on me" />
          </div>
        </div>
      </div>
    );
  }
}