如何从组件获取变量以放在 App.js 上

Question

即使在互联网上搜索我也没有找到，或者说我不明白。 我的问题：我希望在“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;

我的反应不太好，我在互联网上搜索

Answer 1

您想要扩展您的 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])
...