#javascript #reactjs #next.js
Вопрос:
Приношу извинения за объем текста здесь, не уверен, какой код имеет отношение к моей проблеме. Попытка использовать функцию onClick внутри компонента, где функция и зависимости объявлены внутри index.js
Функция 1: У меня есть функция в моем следующем приложении index.js для загрузки данных из API на основе ввода пользователем… (пользователь вводит имя игрока, нажимает кнопку, отображает статистику для этого игрока).
Функция 2: У меня также есть еще один компонент/функция, которая показывает всех игроков из команды/отряда, использующих другую конечную точку API. (выберите, выберите команду, нажмите кнопку, отобразятся все игроки из этой команды).
Я хочу, чтобы щелчок по имени игрока после использования функции 2 делал то же самое, что и функция 1.
index.js :
export default function Home() {
const [teams, setTeams] = useState([]);
const [squads, setSquads] = useState([]);
const [player, setPlayer] = useState("Player Name");
const [squad, setSquad] = useState("default");
const [loading, setLoading] = useState(false);
function handleChange(e) {
setSquad(e.target.value);
}
const loadPeople = async () => {
setLoading(true);
const req = await fetch(`/api/player/${player}`);
const json = await req.json();
setTeams(json);
setLoading(false);
};
const loadSquad = async () => {
setLoading(true);
const req = await fetch(`/api/squad/${squad}`);
const json = await req.json();
setSquads(json);
setLoading(false);
};
return (
<div className={styles.main}>
<Head>
</Head>
<main className={styles.main}>
<select value={squad} onChange={handleChange}>
<option id='example'> Lots of options here, removed to save space
</option>
</select>
<button onClick={() => loadSquad()}>Load</button>
<input
value={player}
id="player"
onChange={(e) => setPlayer(e.target.value)}
/>
<button onClick={() => loadPeople()} id="pbtn">
Load
</button>
{loading amp;amp; <div className={styles.load}>LOADING</div>}
</div>
<div className={styles.teams}>
<Teams teams={teams} />
<Squads squadz={squads} />
</div>
</main>
</div>
);
}
Squads component
import React from "react";
const Squads = ({ squadz }) => {
if (!squadz.teamStats) {
return null;
}
let member = squadz.playerStats;
return (
<React.Fragment>
<br />
<img src={squadz.teamStats.logo} />
<br />
{squadz.teamStats.name}
<br />
{squadz.teamStats.wl}
<br />
<p />
<div class="flex-container">
<div class="flex-child magenta">
<button onclick='loadPeople(member[0][0].player)'>{member[0][0].player}</button>
// ^^^^ this onclick is what i need to work, obviously it doesn't as the function isn't defined here
<p />
{member[0][0].role} <p />
Win Rate: {member[0][0].win_rate}
<p />
{member[0][0].matches} <p />
Total Battles: {member[0][0].total_battles} <p />
{member[0][0].score} <p />
</div>
<div class="flex-child magenta">
<button class="name">{member[1][0].player}</button>
<p />
{member[1][0].role} <p />
Win Rate: {member[1][0].win_rate}
<p />
{member[1][0].matches} <p />
Total Battles: {member[1][0].total_battles} <p />
{member[1][0].score} <p />
</div>
<div class="flex-child magenta">
<button class="name">{member[2][0].player}</button>
<p />
{member[2][0].role} <p />
Win Rate: {member[2][0].win_rate}
<p />
{member[2][0].matches} <p />
Total Battles: {member[2][0].total_battles} <p />
{member[2][0].score} <p />
</div>
<div class="flex-child magenta">
<button class="name">{member[3][0].player}</button>
<p />
{member[3][0].role} <p />
Win Rate: {member[3][0].win_rate}
<p />
{member[3][0].matches} <p />
Total Battles: {member[3][0].total_battles} <p />
{member[3][0].score} <p />
</div>
<div class="flex-child magenta">
<button class="name">{member[4][0].player}</button>
<p />
{member[4][0].role} <p />
Win Rate: {member[4][0].win_rate}
<p />
{member[4][0].matches} <p />
Total Battles: {member[4][0].total_battles} <p />
{member[4][0].score} <p />
</div>
<div class="flex-child magenta">
<button class="name">{member[5][0].player}</button>
<p />
{member[5][0].role} <p />
Win Rate: {member[5][0].win_rate}
<p />
{member[5][0].matches} <p />
Total Battles: {member[5][0].total_battles} <p />
{member[5][0].score} <p />
</div>
<div class="flex-child magenta">
<button class="name">{member[6][0].player}</button>
<p />
{member[6][0].role} <p />
Win Rate: {member[6][0].win_rate}
<p />
{member[6][0].matches} <p />
Total Battles: {member[6][0].total_battles} <p />
{member[6][0].score} <p />
</div>
<div class="flex-child magenta">
<button class="name">{member[7][0].player}</button>
<p />
{member[7][0].role} <p />
Win Rate: {member[7][0].win_rate}
<p />
{member[7][0].matches} <p />
Total Battles: {member[7][0].total_battles} <p />
{member[7][0].score} <p />
</div>
</div>
</React.Fragment>
);
};
export default Squads;
Teams component (not sure if relevant to this problem but here it is
import React from "react"; // react dependencies
const Teams = ({ teams }) => {
// create Teams component
return teams.map((team, index) => (
<React.Fragment key={index}>
<br />{" "}
<div class="container">
{team.map((mon) => (
<React.Fragment key={mon.mon}>
<br /> <div class="bout">{mon.bout}</div>
<div class="child">
<img src={mon.sprite} />
<p>{mon.mon}</p>
</div>
</React.Fragment>
))}
</div>
<br />
</React.Fragment>
));
};
export default Teams;
Ответ №1:
Вы можете передать функцию 1 в качестве опоры дочернему элементу.