React组件通信：从子组件向父组件传递数据

// InputField.js
import React from 'react';

export default function InputField({ onSubmit }) { // 接收 onSubmit prop
  function handleSubmit(e) {
    // 阻止浏览器默认的表单提交行为，防止页面刷新
    e.preventDefault();

    // 读取表单数据
    const form = e.target;
    const inputVal = form.myInput.value;

    console.log("Input value from child:", inputVal);

    // 调用父组件传递的回调函数，并传入输入值
    if (onSubmit) {
      onSubmit(inputVal); 
    }
  }

  return (
    <form method="post" onSubmit={handleSubmit}>
      <input name="myInput" id="adress-field" placeholder="Enter address" autoComplete="on" />
      <button type="submit" id="adress-button">Send</button>
    </form>
  );
}

// App.js
import './App.css';
import AccountNumber from "./components/AccountNumber";
import InputField from "./components/InputField";
import { useEffect, useState } from "react";

function App() {
  // 状态用于存储从InputField接收到的搜索值
  const [searchValue, setSearchValue] = useState(null); 

  // 状态用于管理API请求的token数据
  const [tokens, setTokens] = useState([]);
  // 状态用于管理加载状态
  const [loading, setLoading] = useState(false);

  // 处理从InputField组件传递过来的值
  const handleSearchSubmit = (val) => {
    setSearchValue(val); // 更新searchValue状态
  };

  // useEffect 钩子用于在searchValue变化时发起API请求
  useEffect(() => {
    // 只有当searchValue不为null时才发起请求，避免初始加载时发送无效请求
    if (searchValue) { 
      setLoading(true);
      fetch(`https://api.multiversx.com/accounts/${searchValue}/tokens`) // 使用searchValue
        .then(response => response.json())
        .then(json => setTokens(json))
        .catch(error => {
          console.error("Error fetching tokens:", error);
          setTokens([]); // 请求失败时清空数据
        })
        .finally(() => {
          setLoading(false);
        });
    } else {
      setTokens([]); // 如果没有搜索值，则清空token数据
    }
    console.log("Current tokens state:", tokens); // 注意：这里的tokens可能是旧值，因为useState是异步更新的
  }, [searchValue]); // 将searchValue添加到依赖数组中，当searchValue变化时重新执行useEffect

  // ... (round 和 numberWithSpaces 函数保持不变)
  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 (
    <div className="content"> {/* 将 <content> 改为 <div>，因为 content 不是标准HTML标签 */}
        <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组件，并将handleSearchSubmit作为onSubmit prop传递 */}
                <InputField onSubmit={handleSearchSubmit} /> 
            </div>
            <p>当前搜索地址: {searchValue || "未输入"}</p> {/* 显示当前搜索值 */}
        </div>
        <div className="down-side">
            <table className="Token-section-output">
              {loading ? (
                <div>Loading...</div>
              ) : (
                <>
                  <h1>Tokens</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"/>

                    {tokens.length > 0 ? tokens.map(token => (
                      <tr className='token-row' key={token.identifier || token.id}> {/* 使用更稳定的key */}
                        <td className='token-column'>
                        <img className="img-Tokens" src = {token?.assets?.pngUrl ?? "img/Question.png"} alt={token.name || "Token icon"} /> 
                          <p>{token.name}</p> 
                        </td>
                        <td className='center-column'> <p>${round(token.price, 10000000)}</p> </td>
                        <td> 
                          <p>{round(token.balance / Math.pow(10, token.decimals), 10000000)}</p> 
                          <p className='token-hold'>${round(token.valueUsd, 10000000)}</p>
                        </td>
                      </tr>
                    )) : (
                        <tr><td colSpan="3">暂无代币数据，请尝试输入地址。</td></tr>
                    )}
                  </table>
                </>
              )}
            </table>
        </div>   
    </div>
  );
}

export default App;