Как передать динамическое значение элементу div, а затем получить к нему доступ - React? - PullRequest
Новая
       12

Как передать динамическое значение элементу div, а затем получить к нему доступ - React?

0 голосов
/ 18 ноября 2018

Я сопоставляю все мои файлы 

  _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 на каждой итерации, чтобы я мог контролировать, какой файл был нажат.

Я могу получить доступ к своему идентификатору: this.props._id

Должно ли это быть сделано с помощью ссылок, и если да, то как?

1 Ответ

0 голосов
/ 18 ноября 2018

Вы должны передать 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>
    );
  }
}
...