反应本地改变儿童组成部分的状态

发布于 2025-02-13 05:13:48 字数 750 浏览 1 评论 0原文

我想知道是否有一种方法可以使用函数从子组件中更新父函数组件中的状态组件，我认为我以错误的方式进行了

父母类别：

class Home extends Component {
  state = {
    year: '',
    month: '',
    day: '',
  };
  render() {
       <Dropdown 
                 label= {i18n.locale == 'en' ? 'Year' : 'سنة'} 
                 data={years} 
                 onSelect={() => this.setState(year)}/>
}

孩子组件：

const Dropdown = ({ label, data ,onSelect}) => {
     const renderItem = ({ item }) => (
    onSelect={() => this.setState(item )} 
   <TouchableOpacity style={styles.item} onPress={() => onItemPress(item)}>
      <Text style={styles.buttonText}>{item}</Text>
    </TouchableOpacity>
  );

}

原文

I am wondering if there is a way to update a state in a parent functional component from a child component using a function, i want to assign the value of {item} in child component to the state in parent component, i think i did that in wrong way

the parent class components:

class Home extends Component {
  state = {
    year: '',
    month: '',
    day: '',
  };
  render() {
       <Dropdown 
                 label= {i18n.locale == 'en' ? 'Year' : 'سنة'} 
                 data={years} 
                 onSelect={() => this.setState(year)}/>
}

the child component:

const Dropdown = ({ label, data ,onSelect}) => {
     const renderItem = ({ item }) => (
    onSelect={() => this.setState(item )} 
   <TouchableOpacity style={styles.item} onPress={() => onItemPress(item)}>
      <Text style={styles.buttonText}>{item}</Text>
    </TouchableOpacity>
  );

}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

春风十里 2025-02-20 05:13:48

这样想：OnSelect将是您的父零件this.setState与您的孩子组件之间的桥梁。为了做到这一点并保持灵活性，OnSelect应至少具有一个参数。从您拥有的东西来看，看起来您只需要下拉才能更新年：

 render() {
   <Dropdown 
     label= {i18n.locale == 'en' ? 'Year' : 'سنة'} 
     data={years} 
     onSelect={year => this.setState({year})}/>
  }

现在，在您的孩子组件中，将OnSelect视为要更新父元中的年度值时要调用的函数：

const Dropdown = ({ label, data ,onSelect}) => {
  const renderItem = ({ item }) => (
    <TouchableOpacity
      style={styles.item}
      onPress={() =>{
       onItemPress(item);
       onSelect(item);
      }
    >
      <Text style={styles.buttonText}>{item}</Text>
    </TouchableOpacity>
  );
}

同样出于好奇，是否有理由是父母组成的类别？

Think of it like this: onSelect will be the bridge between your parent component this.setState and your child component. To do that and be flexible, onSelect should have at least one parameter. Judging from what you have, it looks like you only want Dropdown to update year:

 render() {
   <Dropdown 
     label= {i18n.locale == 'en' ? 'Year' : 'سنة'} 
     data={years} 
     onSelect={year => this.setState({year})}/>
  }

Now in your child component think of onSelect as a function to call when it wants to update the year value in the parent component:

const Dropdown = ({ label, data ,onSelect}) => {
  const renderItem = ({ item }) => (
    <TouchableOpacity
      style={styles.item}
      onPress={() =>{
       onItemPress(item);
       onSelect(item);
      }
    >
      <Text style={styles.buttonText}>{item}</Text>
    </TouchableOpacity>
  );
}

Also just out of curiosity, is there reason why the parent component is a class?

回复收藏 0 原文

~没有更多了~