So erhalten Sie Variablen von einer Komponente, um sie in App.js einzufügen

Question

Selbst beim Suchen im Internet konnte ich es nicht finden, oder ich habe es nicht verstanden. Meine Frage: Ich möchte die Variable „inputVal“ in der Komponente „InputField.js“ finden, die „!!HERE!!“ in der Komponente „App.js“ enthält (beim Abrufen). Bitte hilf mir Vielen Dank, dass Sie meine Nachricht gelesen haben!

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;

Meine Reaktion war nicht gut, ich habe im Internet gesucht

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])
...