react 如何获取子组件的值

使用 ref 获取子组件值

在父组件中通过 useRef 或 createRef 创建 ref，并传递给子组件。子组件通过 forwardRef 暴露内部方法或值。

父组件示例：

import { useRef } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const childRef = useRef();

  const handleClick = () => {
    console.log(childRef.current.getValue());
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>获取子组件值</button>
    </div>
  );
}

子组件示例：

import { forwardRef, useImperativeHandle, useState } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  const [value, setValue] = useState('');

  useImperativeHandle(ref, () => ({
    getValue: () => value
  }));

  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
});

通过回调函数传递值

子组件通过 props 接收父组件传递的回调函数，在值变化时主动调用回调。

父组件示例：

function ParentComponent() {
  const handleValueChange = (newValue) => {
    console.log('子组件值:', newValue);
  };

  return <ChildComponent onValueChange={handleValueChange} />;
}

子组件示例：

function ChildComponent({ onValueChange }) {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    const newValue = e.target.value;
    setValue(newValue);
    onValueChange(newValue);
  };

  return <input value={value} onChange={handleChange} />;
}

使用 Context 共享状态

当组件层级较深时，可以通过 Context 共享状态。

创建 Context：

const ValueContext = createContext();

function ParentComponent() {
  const [value, setValue] = useState('');

  return (
    <ValueContext.Provider value={{ value, setValue }}>
      <ChildComponent />
      <div>当前值: {value}</div>
    </ValueContext.Provider>
  );
}

子组件使用：

function ChildComponent() {
  const { setValue } = useContext(ValueContext);

  return <input onChange={(e) => setValue(e.target.value)} />;
}

使用状态管理库

对于复杂应用，可使用 Redux 或 Zustand 等状态管理库集中管理状态。

Zustand 示例：

import create from 'zustand';

const useStore = create((set) => ({
  childValue: '',
  setChildValue: (value) => set({ childValue: value })
}));

function ParentComponent() {
  const childValue = useStore((state) => state.childValue);
  return (
    <div>
      <ChildComponent />
      <div>子组件值: {childValue}</div>
    </div>
  );
}

function ChildComponent() {
  const setChildValue = useStore((state) => state.setChildValue);
  return <input onChange={(e) => setChildValue(e.target.value)} />;
}