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>
    );
  }
}

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

1 个答案: