React中如何从父组件获取子组件的值及代码问题排查

一、修复子组件输入框显示异常 #

你的输入框始终显示childname，是因为handleInputTextChange方法里错误地将输入框的name属性（固定值"childname"）赋值给了state.name，而非用户输入的value。同时为了满足父组件直接调用子组件方法的需求，我们需要结合forwardRef和useImperativeHandle改造子组件：

// child.js
import React, { useState, forwardRef, useImperativeHandle } from 'react';

// 通过forwardRef允许父组件传递ref到子组件
export const Child = forwardRef((props, ref) => {
  const [state, setState] = useState({ name: "" });
  
  const handleInputTextChange = (e) => {
    const { value } = e.target;
    setState({ ...state, name: value });
  };

  // 向父组件暴露getName方法，用于获取子组件的输入值
  useImperativeHandle(ref, () => ({
    getName: () => state.name
  }));

  return(
    <div key="c-div" className="child">
      <input 
        required 
        id="child" 
        name="childname" 
        value={state.name} 
        onChange={handleInputTextChange}
      />
    </div>
  );
});

二、父组件通过ref调用子组件方法获取值 #

父组件需要创建两个独立的ref，分别绑定到两个子组件实例上，之后就能像child1.getName()这样直接调用子组件暴露的方法获取值：

// parent.js
import React, { useState, useRef } from 'react';
import { Child } from './child.js';

export const Parent = () => {
  const [names, setnames] = useState([]);
  // 创建两个ref分别对应两个子组件实例
  const child1Ref = useRef(null);
  const child2Ref = useRef(null);
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    
    // 调用子组件暴露的getName方法获取输入值
    const child1Name = child1Ref.current?.getName();
    const child2Name = child2Ref.current?.getName();
    setnames([child1Name, child2Name]);
  }
  
  return(
    <div key="div1">
      <form name="myformname" id="myformid" onSubmit={handleSubmit}>
        {/* 将ref绑定到对应的子组件 */}
        <Child ref={child1Ref} />
        <Child ref={child2Ref} />
        <button> Print Child Names </button> 
      </form>
      The first child names are <b>{names[0]}</b> and <b>{names[1]}</b>
    </div>
  );
}

核心逻辑说明 #

• forwardRef：函数组件本身没有实例，通过该API可以将父组件的ref转发到子组件内部，让父组件能拿到子组件的引用。
• useImperativeHandle：自定义父组件通过ref能访问到的子组件方法/属性，这里我们只暴露了getName方法，避免父组件直接操作子组件内部状态，保持组件封装性。

内容的提问来源于stack exchange，提问作者Kamal Palei