如何将输入值从子窗体组件传递到其父组件的状态，以便使用react挂钩提交？

在React中，将子组件的输入值传递到父组件的状态通常涉及使用回调函数。这种模式允许子组件通知父组件有关数据变化的信息，然后父组件可以相应地更新其状态。

以下是如何实现这一过程的步骤：

步骤 1: 在父组件中创建一个回调函数

首先，在父组件中创建一个函数，该函数将接收来自子组件的数据，并更新父组件的状态。

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

function ParentComponent() {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (value) => {
    setInputValue(value);
  };

  const handleSubmit = () => {
    // 在这里处理提交逻辑，例如发送数据到服务器
    console.log(inputValue);
  };

  return (
    <div>
      <ChildComponent onInputChange={handleInputChange} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

export default ParentComponent;

步骤 2: 在子组件中使用回调函数

接下来，在子组件中，你需要创建一个受控组件，该组件的值将由父组件的状态控制，并且每当输入变化时，都会调用父组件传递的回调函数。

import React from 'react';

function ChildComponent({ onInputChange }) {
  const handleChange = (event) => {
    onInputChange(event.target.value);
  };

  return (
    <input type="text" onChange={handleChange} />
  );
}

export default ChildComponent;

解释

父组件 (ParentComponent): 使用useState钩子来管理输入值的状态。定义了一个handleInputChange函数，该函数接收新的输入值并更新状态。还有一个handleSubmit函数，用于处理提交逻辑。
子组件 (ChildComponent): 接收一个onInputChange属性，这是一个回调函数。在子组件的输入元素上设置onChange事件处理器，当输入变化时，调用onInputChange并传递新的值。