将 UseState 从子组件传递到父组件? [英] Passing UseState from child component to parent component?

问题描述

我正在尝试忽略状态区域"；在我的 useState Hook 中定义到父元素.不过，我不确定将区域这个词放在哪里才能做到这一点?

这是子元素

从'react'导入React；导出默认函数 SimpleMenu() {const [region, setRegion] = useState(Africa");const filterRegion = (e) =>{setRegion(e.target.value);};返回 (<div><按钮 aria-controls="simple-menu";aria-haspopup="true";onClick={handleClick}>按地区过滤</按钮><菜单><MenuItem onClick={ filterRegion } >Africa</MenuItem><MenuItem onClick={ filterRegion }>美国</MenuItem><MenuItem onClick={ filterRegion }>亚洲</MenuItem><MenuItem onClick={ filterRegion }>欧洲</MenuItem><MenuItem onClick={ filterRegion }>Oceania</MenuItem></菜单>

);}

这是父元素:

state = {国家:[]，渲染国家:非洲"，选定国家:空}<div id="search_dropdown"><菜单国家=渲染国家={this.state.renderedCountries}/>

解决方案

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

不，你不应该.这是 React 的 Data Flows Down<的反模式/a>.

如果你想让父组件和子组件都使用 region 状态，你应该提升状态.

class Parent extends React.Component {构造函数(道具){超级(道具)；this.state = {region: 'Africa'//区域归父组件所有}}//类字段语法updateRegion = (区域) =>{this.setState({ region });}使成为() {//将区域状态作为 prop 向下传递//还提供了一个更新器功能，用于在子组件中设置区域返回 (<div id="search_dropdown"><Menu updateRegion={this.updateRegion} region={this.state.region}/>

);}}

I am trying to pass up the state "region" defined in my useState Hook to the parent element. Im not sure where to put the word region in order to do that though?

This is the Child Element

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

This is the parent element:

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

解决方案

Passing UseState from child component to parent component?

No you shouldn't. This is an anti-pattern of React's Data Flows Down.

If you want both the parent and child component make use of region state, you should lift state up instead.

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

这篇关于将 UseState 从子组件传递到父组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！