从子组件React获取输入数据

在React中，从子组件获取输入数据通常涉及到父子组件之间的通信。以下是一些基础概念和相关方法：

基础概念

Props：父组件向子组件传递数据的方式。
回调函数：子组件通过回调函数将数据传递回父组件。
Context API：用于跨多层组件传递数据。
状态管理库（如Redux）：用于全局状态管理。

类型与应用场景

Props传递：适用于简单的父子组件通信。
回调函数：适用于子组件需要将数据反馈给父组件的场景。
Context API：适用于需要在多层组件之间共享数据的场景。
状态管理库：适用于大型应用，需要集中管理状态的场景。

示例代码

假设我们有一个父组件ParentComponent和一个子组件ChildComponent，子组件中有一个输入框，我们需要将输入框的值传递回父组件。

父组件

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

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

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

  return (
    <div>
      <h1>Parent Component</h1>
      <p>Input Value from Child: {inputValue}</p>
      <ChildComponent onInputChange={handleInputChange} />
    </div>
  );
}

export default ParentComponent;

子组件

import React, { useState } from 'react';

function ChildComponent({ onInputChange }) {
  const [input, setInput] = useState('');

  const handleChange = (event) => {
    const value = event.target.value;
    setInput(value);
    onInputChange(value); // 将输入值传递给父组件
  };

  return (
    <div>
      <h2>Child Component</h2>
      <input type="text" value={input} onChange={handleChange} />
    </div>
  );
}

export default ChildComponent;