如何使用 Hooks 將 state 從孩子傳遞給父母

Question

我是新來的反應，我正在嘗試建立一個網站，用戶可以在搜索欄中編寫查詢並返回一些結果。

我創建了兩個組件： Searchform （父）和Searchbar （子）。

我知道如何更新孩子的 state：

function Searchbar() {

  const [query, setQuery] = useState("");

  return(
    <TextField
      defaultValue=""
      placeholder="Search"
      label="Search bar"
      fullWidth
      onChange={(event)=>setQuery(event.target.value)}
    />
  )
}

但是，我不確定如何將這個新的 state 發送給父母。

function Searchform() {

  function handleSubmit() {
    console.log(query)
  }

  const [query, setQuery] = useState("");

  return(
    <form onSubmit={handleSubmit}>
        <div className="searchbar">
          <Searchbar />  # I think I have to do something here but not sure what.
        </div>
        <Button variant="contained" color="primary" type="submit">
        Submit your search
      </Button>
    </form>
  )
}

Answer 1

您需要在父級中維護查詢並將值和 onChange 傳遞給子級：

function Searchbar({ value, onChange }) {
  return (
    <TextField
      placeholder="Search"
      label="Search bar"
      fullWidth
      value={value}
      onChange={onChange}
    />
  );
}

function Searchform() {
  function handleSubmit() {
    console.log(query);
  }
  const [query, setQuery] = useState('');
  //create onChange function that will never
  //  change during component life cycle
  const onChange = useCallback(
    e => setQuery(e.target.value),
    []
  );

  return (
    <form onSubmit={handleSubmit}>
      <div className="searchbar">
        {/* pass value and onChange */}
        <Searchbar value={query} onChange={onChange} />
        but not sure what.
      </div>
      <Button
        variant="contained"
        color="primary"
        type="submit"
      >
        Submit your search
      </Button>
    </form>
  );
}

Answer 2

State 應該被提升到處理 state 的最頂層容器，然后通過道具（或上下文提供者）向下傳遞。

要更新 state，您必須將回調 function 從父組件傳遞到子組件，以允許子組件更新父組件的 state。 然后，更改將在重新渲染期間傳播到所有孩子。

這是一個通用的 React 概念，無論是使用鈎子還是類，請參閱 React 文檔

一個基本的例子：

const Parent = () => {

  const [query, setQuery] = useState(null);

  return <Child onQuery={setQuery} />;

}

const Child = ({ onQuery }) => (
  <TextField onChange={event => onQuery(event.target.value)} />
);

Answer 3

希望這可以幫助，

 function Searchform() {

  function handleSubmit() {
    console.log(query)
  }

  const [query, setQuery] = useState("");

  return(
    <form onSubmit={handleSubmit}>
        <div className="searchbar">
          <Searchbar setQuery={setQuery} />
        </div>
        <Button variant="contained" color="primary" type="submit">
        Submit your search
      </Button>
    </form>
  )
}



function Searchbar({setQuery}) {

 // const [query, setQuery] = useState("");

  return(
    <TextField
      defaultValue=""
      placeholder="Search"
      label="Search bar"
      fullWidth
      onChange={(event)=>setQuery(event.target.value)}
    />
  )
}