Ce que je veux faire:
Rechercher dans Navbar.js , je veux attribuer le texte de recherche dans la variable urlQuery afin que je puisse passer comme accessoires dans le composant Episodes.js Navbar.js d'une manière ou d'une autre au composant Episodes.js afin que je puisse interroger l'API REST Comment puis-je obtenir le comportement souhaité pls help
App.js
Failed to compile. ./src/components/Navbar/Navbar.js Line 14:48: Unexpected use of 'event' no-restricted-globals Search for the keywords to learn more about each error.
Navbar.js
import React from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import FormControl from 'react-bootstrap/FormControl';
const customNavbar = () => {
return (
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">Rick And Morty</Navbar.Brand>
<Form inline>
<FormControl type="text" placeholder="Search" />
<Button>Search</Button>
</Form>
</Navbar>
);
}
export default customNavbar
Modifier
Sur la suggestion de Zohaib, cette erreur est générée
XXX
4 Réponses :
Changez urlQuery en variable d'état. Ensuite, passez setUrlQuery à NavBar comme accessoire et sur le bouton de recherche, cliquez sur Evénement pour appeler la fonction setUrlQuery.
Vous aimez ça? Si oui, c'est une erreur
onClick = {() => props.setUrlQuery (event.target.value)} Vérifiez ceci ou affichez-moi une erreur
en fait, l'erreur est liée à l'événement. Essayez d'abord de transmettre la valeur codée en dur.
vérifiez ce lien pour obtenir la valeur et passez-le à la fonction stackoverflow.com/questions/45194498/...
C'était pour les composants basés sur les classes
Voulez-vous dire quelque chose comme ceci ?
Les réponses liées uniquement aux liens ne méritent pas de votes positifs. Et si la page descend? Et si la page change? Veuillez extraire le code correspondant de la page externe et ajouter une explication.
cela devrait être un commentaire, pas une réponse
@ 3limin4t0r cette question ne mérite pas de rester longtemps, donc la réponse est!
XXX
Navbar.js^
import React, { useState } from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import FormControl from 'react-bootstrap/FormControl';
const customNavbar = ({ onButtonClick }) => {
const [searchValue, setSearchValue] = useState('');
return (
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">Rick And Morty</Navbar.Brand>
<Form inline>
<FormControl type="text" placeholder="Search" value={searchValue} onChange={(e) => setSearchValue(e.target.value)} />
<Button onClick={() => onButtonClick(searchValue)}>Search</Button>
</Form>
</Navbar>
);
}
export default customNavbar
Le la partie importante ici est que vous transmettez la fonction handleButtonClick au composant enfant (Navbar). De cette façon, vous pouvez appeler cette fonction parent dans le composant enfant quand vous le souhaitez (c'est-à-dire lorsque l'utilisateur clique sur le bouton d'envoi).
cette erreur React Hook "useState" est appelée dans la fonction "customNavbar" qui n'est ni un composant de fonction React ni une fonction React Hook personnalisée
nvm l'a corrigé en capitolisant CustomNavbar
De plus, e n'est pas une erreur définie et en faire un événement génère également une erreur
J'ai fait une faute de frappe (mis à jour le message) - essayez de changer la ligne comme suit:
Il existe un guide React sur ce problème spécifique: Lifting State Up .
Normalement, vous gérez l'état dans le parent. Dans ce cas, App où vous gérez l'état du texte de recherche. Vous passez une fonction aux composants pour changer cet état. Les composants qui dépendent de cet état reçoivent la valeur via les propriétés.
Voici un exemple:
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div>
th { text-align: left; }
a { cursor: pointer; }
const {useEffect, useState} = React;
function App() {
const episodesURL = "https://rickandmortyapi.com/api/episode";
const [page, setPage] = useState(1);
const [pageInfo, setPageInfo] = useState({});
const [searchText, setSearchText] = useState("");
const [episodes, setEpisodes] = useState([]);
useEffect(() => {
const url = new URL(episodesURL);
url.searchParams.set("page", page);
if (searchText) url.searchParams.set("name", searchText);
fetch(url)
.then(response => response.json())
.then(response => {
if (response.error) {
setPageInfo({});
setEpisodes([]);
} else {
setPageInfo(response.info);
setEpisodes(response.results);
}
});
}, [page, searchText]);
const search = searchText => {
setSearchText(searchText);
setPage(1);
};
return (
<div>
<CustomNavbar search={search} />
<Episodes episodes={episodes} />
<Pagination setPage={setPage} info={pageInfo} />
</div>
);
}
function CustomNavbar({search}) {
const [searchText, setSearchText] = useState("");
const handleFormSubmit = event => {
event.preventDefault();
search(searchText);
};
return (
<form onSubmit={handleFormSubmit}>
<input
type="text"
placeholder="search"
value={searchText}
onChange={event => setSearchText(event.target.value)}
/>
<button type="submit">Search</button>
</form>
);
}
function Episodes({episodes}) {
return (
<table>
<thead>
<tr>
<th>episode</th>
<th>name</th>
<th>air date</th>
</tr>
</thead>
<tbody>
{episodes.map(episode => (
<tr key={episode.id}>
<td>{episode.episode}</td>
<td>{episode.name}</td>
<td>{episode.air_date}</td>
</tr>
))}
</tbody>
</table>
);
}
function Pagination({setPage, info}) {
return (
<div>
{info.prev && <a onClick={() => setPage(page => page - 1)}>previous</a>}
{info.next && <a onClick={() => setPage(page => page + 1)}>next</a>}
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
Y a-t-il une raison spécifique pour laquelle vous transmettez les données via l'URL? La communication directe du composant enfant au composant parent fonctionnerait-elle pour votre cas d'utilisation?
Pouvez-vous demander cela en termes de Layman? je n'ai pas compris la question
Si l'URL ne change pas, est-ce correct?
Non, ça doit changer ...
Oups, j'ai mal lu la question. Je voulais dire l'URL du navigateur, mais ce n'est pas pertinent. Donnez-moi une minute, je vais essayer de répondre à la question