В Tournaments.js у меня есть список имен турниров, каждый из которых имеет уникальный идентификатор, который извлекается из API. Теперь всякий раз, когда я нажимаю на одно из этих названий турниров, я получаю его идентификатор, но мне нужно передать этот идентификатор в Template.js, где я могу получить данные о турнире на основе идентификатора турнира, по которому щелкнули. Я пытаюсь что-то сделать с передачей реквизита от ребенка к родителю, но сейчас я полностью потерян.
Турнир.js:
import React, { Component } from "react";
import Template from './template';
const API = 'http://localhost:8080/api/tournaments';
class Tournaments extends Component {
constructor() {
super();
this.state = {
data: []
}
}
componentDidMount() {
fetch(API)
.then((Response) => Response.json())
.then((findresponse) => {
console.log(findresponse)
this.setState({
data:findresponse,
})
})
}
reply_click(event) {
var targetId = event.target.getAttribute('id');
console.log(targetId);
}
render() {
return(
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="jumbotron text-center">
{
this.state.data.map((dynamicData, key) =>
<div>
<a href={"/#/template"} id={dynamicData.id} onClick={this.reply_click}>{dynamicData.name}</a>
<a href={"/#/addTeams"}><button type="button" class="btn-lisa">Edit</button></a>
<Template name={dynamicData.id}></Template>
</div>
)
}
</div>
</div>
</div>
</div>
)
}
}
export default Tournaments;
Шаблон.js:
import React, { Component } from "react";
import Parser from 'html-react-parser';
import Tournaments from "./Tournaments";
import './template.css';
import './index.css';
const tournyAPI = 'http://localhost:8080/api/tournaments';
const teamAPI = 'http://localhost:8080/api/teams'
class template extends Component {
constructor() {
super();
this.state = {
data: [],
}
}
componentDidMount() {
fetch(tournyAPI)
.then((Response) => Response.json())
.then((findresponse) => {
this.setState({
tournydata:findresponse.filter(res => res.id === 18),
})
})
Итак, в основном моя цель — использовать targetID из Tournament.js вместо «18» в ComponentDidMount в Template.js.