Javascript 将UseState从子组件传递到父组件？

我试图将useState钩子中定义的状态“region”传递给父元素。我不知道该把region这个词放在哪里才能做到这一点

这是子元素

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

从“React”导入React；
导出默认函数simplemu（）{
const[region，setRegion]=useState（“非洲”）；
常量过滤器区域=（e）=>{
设置区域（如目标值）；
};  
返回(
按区域过滤
非洲
美国
亚洲
欧洲
大洋洲
);
}

这是父元素：

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

状态={
国家：[]，
各国：“非洲”，
所选国家/地区：空
}

将UseState从子组件传递到父组件

不，你不应该。这是React的反模式

如果希望父组件和子组件都使用

区域

状态，则应改为使用

类父级扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
region:'Africa'//region归父组件所有
}
}
//类字段语法
更新区域=（区域）=>{
this.setState（{region}）；
}
render（）{
//作为道具向下传递区域状态
//还提供一个更新程序函数，用于在子组件中设置区域
返回(
);
}
}

如果您将全部代码（导入和文件名）复制到您的帖子中，我会尝试对其进行调试。例如，我不知道您的父对象是类还是函数组件。此外，它似乎正在呈现

菜单

，但您已将子组件命名为

simplemu

。您是否记得将

SimpleNu

导入父组件？话虽如此，解决问题的一个办法就是把一个道具，一种方法，从父母传给孩子。然后在child中执行该方法，并为其提供所需的参数（在本例中为

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