Même en cherchant sur Internet, je ne l’ai pas trouvé ou je ne l’ai pas compris. Ma question : je veux trouver la variable "inputVal" dans le composant "InputField.js" qui a "!!HERE !!" dans le composant "App.js" (lors de l'obtention) S'il vous plaît aidez-moi Merci d'avoir lu mon message !
export default function InputField() { function handleSubmit(e) { // Prevent the browser from reloading the page e.preventDefault(); // Read the form data const form = e.target; const inputVal = form.myInput.value; console.log(inputVal); } return ( ); }
import './App.css'; import AccountNumber from "./components/AccountNumber"; import InputField from "./components/InputField"; import { useEffect, useState } from "react" function App() { //token fetch const [tockens, setTockens] = useState([]) const [loading, setLoading] = useState(false) useEffect(() => { setLoading(true) fetch("https://api.multiversx.com/accounts/!!HERE!!/tokens") .then(response => response.json()) .then(json => setTockens(json)) .finally(() => { setLoading(false) }) console.log(tockens); }, []) function round(nr, ten) { // arondi un chiffre. return Math.round(nr * ten) / ten; } function numberWithSpaces(nr) { // formate un chiffre(x xxx xxx). return nr.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " "); } return ( Total number of accounts
{InputField()} {window.inputVal}
{loading ? ( Loading... ) : ( <> Tockens
Name Price Hold 
{tocken.name}
${round(tocken.price, 10000000)}
{round(tocken.balance / Math.pow(10, tocken.decimals), 10000000)}
${round(tocken.valueUsd, 10000000)}
))}
)}
); } export default App;
Ma réaction n'a pas été bonne, j'ai cherché sur internet
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous souhaitez étendre votre composant
InputFieldpour accepter une fonction de rappel qui peut être transmise par votre application :export default function InputField({onSubmit}) { function handleSubmit(e) { // Prevent the browser from reloading the page e.preventDefault(); // Read the form data const form = e.target; const inputVal = form.myInput.value; console.log(inputVal); onSubmit(inputVal) } ... }Dans votre application, vous devez transmettre ce rappel à votre composant :
Remarque : les composants ne sont pas consommés par les appels comme les fonctions.
Dans la logique de votre application, vous avez besoin d'un autre état pour contenir la valeur de votre recherche :
... const [searchValue, setSearchValue] = useState(null); const handleSearchSubmit = (val) => { setSearchValue(val); } useEffect(() => { setLoading(true) fetch(`https://api.multiversx.com/accounts/${searchValue}/tokens`) .then(response => response.json()) .then(json => setTockens(json)) .finally(() => { setLoading(false) }); console.log(tockens); }, [searchValue]) ...