如何从组件获取变量并放在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 [tokens, setTokens] = useState([])
  const [loading, setLoading] = useState(false)
  useEffect(() => {
    setLoading(true)
    fetch("https://api.multiversx.com/accounts/!!HERE!!/tokens")
      .then(response => response.json())
      .then(json => setTokens(json))
      .finally(() => {
        setLoading(false)
      })
      console.log(tokens); 
  }, [])


  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>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.map(token => (
                      <tr className='token-row' key={token.id}>
                        <td className='token-column'>
                        <img className="img-Tokens" src = {token?.assets?.pngUrl ?? "img/Question.png"} /> 
                          <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>
                    ))}

                  </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 => setTokens(json))
      .finally(() => {
        setLoading(false)
      });
    console.log(tokens); 
}, [searchValue])
...