IT技术 - 将 UseState 从子组件传递到父组件？ - 吾爱随笔录

我试图将 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>

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