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

小能豆

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

javascript

我有两个组件：

第一个是父组件，是一个通常的 React 组件。
第二个是子组件，它是一个功能组件。

我想将Titles的值（处于子状态）传递给父组件。这是我的子组件代码：

        export default function ChildApp(props) {

        const  [titles,setTitles] = React.useState("")

          return (

           <Button title="submit" onPress={()=>setTitles("asma")}/>

               );
             }

这是我的父组件：

       this.state = { titles:"foo"} 
       setTitles = titles => this.setState({ titles })

       // i need the value of Titles to be set in state 
        export default class ParentApp extends Component {
       const titles = this.state.titles
           <ChildApp titles={titles} setTitles={this.setTitles} />
         }

这看起来很容易，但这是我第一次使用函数式组件。你能帮助我吗？

阅读 55

2024-06-16

共1个答案

小能豆

当然，您可以通过将函数从父组件传递到子组件来实现这一点。子组件可以调用此函数将更新的状态值传回父组件。您可以这样做：

子组件

修改您的子组件以接受setTitles作为道具并在按下按钮时调用它。

import React from 'react';

export default function ChildApp({ setTitles }) {
  const [titles, setLocalTitles] = React.useState("");

  const handlePress = () => {
    setLocalTitles("asma");
    setTitles("asma");  // Pass the new title to the parent component
  };

  return (
    <button onClick={handlePress}>Submit</button>
  );
}

父组件

在父组件中，你可以将setTitles函数作为 prop 传递给子组件。

import React, { Component } from 'react';
import ChildApp from './ChildApp';

export default class ParentApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      titles: "foo"
    };
  }

  setTitles = (titles) => {
    this.setState({ titles });
  };

  render() {
    const { titles } = this.state;
    return (
      <div>
        <h1>Current Title: {titles}</h1>
        <ChildApp setTitles={this.setTitles} />
      </div>
    );
  }
}

解释

子组件：
ChildApp从父级接收该setTitles函数作为 prop。
当按下按钮时，它会调用setLocalTitles来更新其本地状态并setTitles更新父状态。
父组件：
ParentApp定义setTitles更新父组件状态的方法。
ChildApp此方法作为 prop传递。
父组件的render方法显示当前标题并包含子组件，将函数setTitles作为 prop 传递。

此设置允许子组件更新父组件的状态，从而实现从子组件到父组件的数据流。

2024-06-16