如何从函数式子组件向类式父组件传递值（以Checkbox组件为例）

要实现函数式子组件把Checkbox的选中状态传给类式父组件，核心思路是父组件传递一个回调函数给子组件，子组件在状态变化时调用这个回调，把最新的布尔值传递回去。咱们一步步调整你的代码：

第一步：修改函数式子组件（Checkbox） #

子组件需要接收父组件传来的回调函数，在自身状态变化时触发这个回调，把最新的checked值传出去。另外注意你代码里的命名冲突问题：自定义组件和你用的UI库Checkbox重名了，我先把UI库组件改名为UICheckbox来区分：

import { useState } from 'react';
// 替换成你实际使用的UI库导入
import { Checkbox as UICheckbox } from 'your-ui-library';

export const Checkbox = (props) =>{ 
  // 可选：支持受控模式，用父组件传来的checked作为初始值
  const [checked, setChecked] = useState(props.checked ?? false); 

  const handleChange = (e) => {
    const newChecked = e.target.checked;
    setChecked(newChecked);
    // 调用父组件的回调，传递最新选中状态
    props.onChange?.(newChecked);
  };

  return ( 
    <UICheckbox label="XYZ" checked={checked} onChange={handleChange} /> 
  ); 
}

第二步：修改类式父组件 #

父组件需要定义一个处理子组件状态变化的方法，把这个方法作为onChange属性传给子组件，同时可以在父组件内部维护这个选中状态（或者把值传递给更上层组件）：

import { Checkbox } from './Checkbox';

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    // 父组件维护选中状态，初始值可从props读取或设为默认值
    this.state = {
      checkboxChecked: this.props.value ?? false
    };
  }

  handleCheckboxChange = (checked) => {
    // 更新父组件状态，这里可以添加你需要的业务逻辑（比如表单提交、通知上层组件等）
    this.setState({ checkboxChecked: checked });
    // 如果需要把值传给父组件的上层组件，可调用 this.props.onParentChange(checked)
  }

  render(){ 
    return( 
      <Checkbox 
        checked={this.state.checkboxChecked} 
        onChange={this.handleCheckboxChange} 
      />
    ); 
  }
}

额外说明 #

如果不需要子组件自己维护状态（完全受控模式），可以去掉子组件的useState，直接使用父组件传来的checked值，只负责触发回调通知父组件更新：

export const Checkbox = (props) =>{ 
  const handleChange = (e) => {
    props.onChange?.(e.target.checked);
  };

  return ( 
    <UICheckbox label="XYZ" checked={props.checked} onChange={handleChange} /> 
  ); 
}

这种模式下，父组件完全掌控Checkbox的状态，子组件仅作为渲染和交互的载体。

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