Comment obtenir des variables d'un composant à mettre sur App.js

Question

Même en cherchant sur Internet, je ne l’ai pas trouvé ou je ne l’ai pas compris. Ma question : je veux trouver la variable "inputVal" dans le composant "InputField.js" qui a "!!HERE !!" dans le composant "App.js" (lors de l'obtention) S'il vous plaît aidez-moi Merci d'avoir lu mon message !

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;

Ma réaction n'a pas été bonne, j'ai cherché sur internet

Answer 1

Vous souhaitez étendre votre composant InputField pour accepter une fonction de rappel qui peut être transmise par votre application :

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)
  }

  ...
}

Dans votre application, vous devez transmettre ce rappel à votre composant :

<div className="adress-search">
  <InputField onSubmit={handleSearchSubmit} />
</div>

Remarque : les composants ne sont pas consommés par les appels comme les fonctions.

Dans la logique de votre application, vous avez besoin d'un autre état pour contenir la valeur de votre recherche :

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