Malah mencari di internet saya tidak menemuinya, atau saya tidak memahaminya. Soalan saya: Saya ingin mencari pembolehubah "inputVal" dalam komponen "InputField.js" yang mempunyai "!!DI SINI!!" Tolong saya Terima kasih kerana membaca mesej saya!
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 ( <form method="post" onSubmit={handleSubmit}> <input name="myInput" id="adress-field" placeholder="Enter adress" autoComplete="on" /> <button type="submit" id="adress-button">Send</button> </form> ); }
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 ( <content className="content"> <div className="up-side"> <div className="account-number-box"> <p id="p-account-number">Total number of accounts</p> <p id="account-number"><AccountNumber/></p> </div> <div className="adress-search"> {InputField()} </div> <p>{window.inputVal}</p> </div> <div className="down-side"> <table className="Token-section-output"> {loading ? ( <div>Loading...</div> ) : ( <> <h1>Tockens</h1> <table className='Token-section-output' border={0}> <tr className='token-row-type'> <th className='token-column'>Name</th> <th className='center-column'>Price</th> <th>Hold</th> </tr> <tr className="space20"/> {tockens.map(tocken => ( <tr className='token-row' key={tocken.id}> <td className='token-column'> <img className="img-Tockens" src = {tocken?.assets?.pngUrl ?? "img/Question.png"} /> <p>{tocken.name}</p> </td> <td className='center-column'> <p>${round(tocken.price, 10000000)}</p> </td> <td> <p>{round(tocken.balance / Math.pow(10, tocken.decimals), 10000000)}</p> <p className='token-hold'>${round(tocken.valueUsd, 10000000)}</p> </td> </tr> ))} </table> </> )} </table> </div> </content> ); } export default App;
Reaksi saya tidak bagus, saya mencari di internet
Anda ingin melanjutkan komponen
InputField
anda untuk menerima fungsi panggil balik yang boleh diluluskan oleh apl anda:Dalam aplikasi anda, anda perlu menghantar panggilan balik ini kepada komponen anda:
Nota: Komponen tidak digunakan oleh panggilan seperti fungsi.
Dalam logik aplikasi anda, anda memerlukan keadaan lain untuk menyimpan nilai carian anda: