將 UseState 從子組件傳遞到父組件？

Question

我試圖將 useState Hook 中定義的狀態“區域”傳遞給父元素。 我不知道把地區這個詞放在哪里才能做到這一點？

這是子元素

import React from 'react';

export default function SimpleMenu() {

  const [region, setRegion] = useState("Africa");

  const filterRegion = (e) => {
    setRegion(e.target.value);
  };  

  return (
    <div>
      <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
        Filter by Region
      </Button>
      <Menu>
        <MenuItem onClick={ filterRegion } >Africa</MenuItem>
        <MenuItem onClick={ filterRegion }>America</MenuItem>
        <MenuItem onClick={ filterRegion }>Asia</MenuItem>
        <MenuItem onClick={ filterRegion }>Europe</MenuItem>
        <MenuItem onClick={ filterRegion }>Oceania</MenuItem>
      </Menu>
    </div>
  );
}

這是父元素：

state = {
  countries: [],
  renderedCountries: "Africa",
  selectedCountries: null
}
  
<div id="search_dropdown">
   <Menu countries = renderedCountries = {this.state.renderedCountries}/>
</div>

Answer 1

將 UseState 從子組件傳遞到父組件？

不，你不應該。 這是 React 的Data Flows Down的反模式。

如果你想讓父組件和子組件都使用region狀態，你應該提升狀態。

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      region: 'Africa' // region is owned by Parent component
    }
  }

  // class field syntax
  updateRegion = (region) => {
    this.setState({ region });
  }

  render() {
     // Pass region state down as prop
     // Also provide an updater function for setting region in child component
     return (
       <div id="search_dropdown">
         <Menu updateRegion={this.updateRegion} region={this.state.region} />
       </div>
     );
  }
}