React 16.14.0：如何在类组件中获取函数子组件的表单值？

针对React 16.14.0版本，给你两种可行的解决方法，按需选择：

方案一：受控组件（推荐，符合React单向数据流设计） #

原理：父组件维护薪资状态，把状态和更新方法通过props传给子组件，子组件基于props控制输入框，父组件直接读取自身状态就能拿到薪资值。

main.js（类组件） #

import React, { Component } from 'react';
import SalaryInfo from './SalaryInfo';

class Main extends Component {
  state = {
    empName: 'sam',
    empSalary: '20k'
  };

  handleSalaryChange = (e) => {
    this.setState({ empSalary: e.target.value });
  };

  // 示例：提交时获取薪资值
  handleSubmit = () => {
    console.log('当前薪资：', this.state.empSalary);
  };

  render() {
    return (
      <div>
        <FormGroup>
          <Col sm={2} style={{ textAlign: 'right' }}>
            <input 
              value={this.state.empName} 
              onChange={(e) => this.setState({ empName: e.target.value })} 
            />
          </Col>
        </FormGroup>
        {/* 将状态和更新方法传递给子组件 */}
        <SalaryInfo 
          salary={this.state.empSalary} 
          onSalaryChange={this.handleSalaryChange} 
        />
        <button onClick={this.handleSubmit}>提交</button>
      </div>
    );
  }
}

SalaryInfo.js（函数组件） #

import React from 'react';

const SalaryInfo = ({ salary, onSalaryChange }) => {
  return (
    <FormGroup>
      <Col sm={2} style={{ textAlign: 'right' }}>
        <input 
          value={salary} 
          onChange={onSalaryChange} 
        />
      </Col>
    </FormGroup>
  );
};

export default SalaryInfo;

方案二：forwardRef + createRef（非受控场景，适合仅在特定时机获取值） #

原理：函数组件默认无法直接接收ref，需要用React.forwardRef将父组件传递的ref转发到内部的input元素，父组件通过ref获取DOM节点的值。

SalaryInfo.js（函数组件） #

import React, { forwardRef } from 'react';

// 用forwardRef包裹组件，接收ref参数并转发给input
const SalaryInfo = forwardRef((props, ref) => {
  return (
    <FormGroup>
      <Col sm={2} style={{ textAlign: 'right' }}>
        <input 
          defaultValue='20k' 
          ref={ref} 
        />
      </Col>
    </FormGroup>
  );
});

export default SalaryInfo;

main.js（类组件） #

import React, { Component, createRef } from 'react';
import SalaryInfo from './SalaryInfo';

class Main extends Component {
  // 创建ref用于关联子组件内的input
  salaryRef = createRef();

  handleSubmit = () => {
    // 通过ref获取输入框的当前值
    console.log('当前薪资：', this.salaryRef.current.value);
  };

  render() {
    return (
      <div>
        <FormGroup>
          <Col sm={2} style={{ textAlign: 'right' }}>
            <input ref='emp_name' value='sam' />
          </Col>
        </FormGroup>
        {/* 将ref传递给子组件 */}
        <SalaryInfo ref={this.salaryRef} />
        <button onClick={this.handleSubmit}>提交</button>
      </div>
    );
  }
}

补充说明 #

• 之前用refs无效，是因为函数组件没有实例，直接给函数组件加ref无法获取内部DOM，必须通过forwardRef转发；
• 用state/props无效大概率是没正确实现单向数据流——子组件没把输入变化通过回调通知父组件更新状态，导致父组件拿不到最新值。

内容的提问来源于stack exchange，提问作者Mohammed Mohideen M Z