即使在互联网上搜索我也没有找到，或者说我不明白。 我的问题：我希望在“InputField.js”组件中找到“inputVal”变量，其中有“!!HERE!!”在“App.js”组件中（在获取时） 请帮我 感谢您阅读我的留言！
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;
我的反应不太好，我在互联网上搜索
您想要扩展您的
InputField组件以接受可由您的应用传递的回调函数：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) } ... }在您的应用程序中，您需要将该回调传递给您的组件：
<div className="adress-search"> <InputField onSubmit={handleSearchSubmit} /> </div>注意：组件不会像函数一样通过调用而被消耗。
在您的应用程序逻辑中，您需要另一个状态来保存您的搜索值：
... 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]) ...