如何在反應中顯示從addImg.js（子組件）到app.js（父組件）的輸入框值

Question

我想顯示從addImg.js （子組件）到app.js （父組件）的輸入框值。 我怎樣才能做到這一點？

應用程序.js

 function App() {
  var [add, setAdd] = useState(false)

  function click() {
    setAdd(true)
  }

  return (
    <div className="bigDiv">
      <button onClick={click}>click</button>
      <br /><br />
      {
        add && <Addimg />
      }           
     // I want to display text from input in Addimg.js here(in app.js)                
   </div>    
  )
}

addimg.js

    export default function addimg() {
    return (
        <div>
            <input type="text" />
        </div>
    )
}

Answer 1

我只是將 function onInputChange傳遞給AddImg component 。 並且在AddImg component中調用function on Input更改以傳遞input值，以便可以在父組件中設置它。

應用程序.js

function App() {
  const [add, setAdd] = useState(false);
  const [inputText, setInputText] = useState('');

  function click() {
    setAdd(true)
  }

  return (
    <div className="bigDiv">
      <button onClick={click}>click</button>
      <br /><br />
      {
        add && 
          <>
            <Addimg onInputChange={(value) => setInputText(value)} /> 
            {inputText}
          </>
      }
      
    </div>
  )}

AddImg.js

export default function addimg({onInputChange}) {
      return (
        <div>
           <input type="text" onChange={(e) => onInputChange(e.target.value)} />
        </div>
       )
   }