反应钩子将数据从孩子发送到父母 - Javascript

在React中，父组件和子组件之间的数据传递是非常常见的。子组件通常会通过props接收来自父组件的数据。但是，有时子组件需要将数据发送回父组件，这需要用到反应钩子将数据从孩子发送到父母。

父子组件

在本例中，我们将创建两个组件：父组件和子组件。父组件将向子组件传递一些数据，并始终保持跟踪此数据的状态。子组件将接收此数据，并允许用户更改它，然后将更改后的数据发送回父组件。

父组件

父组件将使用状态管理所需的数据。我们将使用useState Hook来实现这一点。我们还将创建一个名为updateText的函数，该函数将接收新文本值并将其设置为组件状态的新值。

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [text, setText] = useState('Hello, World!');
  
  function updateText(newText) {
    setText(newText);
  }
  
  return (
    <div>
      <h1>{text}</h1>
      <ChildComponent text={text} updateText={updateText} />
    </div>
  );
}

export default ParentComponent;

子组件

子组件将接收父组件传递的text属性，显示它，并提供一种更改它的方式。当用户提交更改时，子组件将调用父组件传递的updateText函数，以将新值发送回父组件。

import React, { useState } from 'react';

function ChildComponent(props) {
  const [text, setText] = useState(props.text);

  function handleChange(event) {
    setText(event.target.value);
  }

  function handleSubmit() {
    props.updateText(text);
  }

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <button onClick={handleSubmit}>Update Text</button>
    </div>
  );
}

export default ChildComponent;

使用

现在我们可以在任何地方使用ParentComponent，并且它将接收我们想要在子组件中操作的文本。子组件将接收当前文本值，并允许用户使用文本字段更改它。当用户提交更改时，将调用父组件中的updateText函数，并将新文本值传递回父组件。

import React from 'react';
import ParentComponent from './ParentComponent';

function App() {
  return (
    <div>
      <ParentComponent />
    </div>
  );
}

export default App;

现在，每当文本值更改时，就会将其发送回父组件。您可以根据需要扩展此示例以满足更具体的需求。