React中可以给子组件children绑定onChange、onBlur等事件吗？

当然可以，React 提供了两种成熟的方案实现给 children 注入状态、事件函数等额外功能：

适合 children 是单个/固定结构 React 元素的场景，也是你给出的 FormField 示例最适配的方案。这个 API 可以克隆传入的子元素，同时合并你需要额外传入的状态、事件处理函数，不会破坏子元素原本的属性。

修改后的示例代码如下：

import { useState, cloneElement } from 'react';

function FormField({ children }) {
  const [isFocused, setIsFocused] = useState(false);

  // 克隆子元素，合并注入额外的状态和事件
  const enhancedChild = cloneElement(children, {
    isFocused,
    onFocus: (e) => {
      // 优先执行子元素原本绑定的 onFocus 逻辑，避免覆盖用户自定义行为
      children.props.onFocus?.(e);
      setIsFocused(true);
    },
    onBlur: (e) => {
      children.props.onBlur?.(e);
      setIsFocused(false);
    }
  });

  return (
    <FormGroup>
      {enhancedChild}
      <Line style={{ backgroundColor: isFocused ? '#1677ff' : '#d9d9d9' }} />
    </FormGroup>
  );
}

如果有多个 children 需要批量处理，可以搭配 React.Children.map 遍历：

const enhancedChildren = React.Children.map(children, child => {
  // 过滤文本、null 等非合法 React 元素节点
  if (!React.isValidElement(child)) return child;
  return cloneElement(child, { /* 要注入的属性 */ });
});

适合需要灵活控制绑定逻辑的场景，不需要依赖元素克隆，你可以直接把状态、方法作为参数传给作为函数的 children，由用户自己决定绑定到哪个元素上。

示例代码如下：

import { useState } from 'react';

function FormField({ children }) {
  const [isFocused, setIsFocused] = useState(false);

  const inputHandlers = {
    onFocus: (e) => {
      e.persist();
      setIsFocused(true);
    },
    onBlur: (e) => {
      e.persist();
      setIsFocused(false);
    }
  };

  return (
    <FormGroup>
      {/* 把状态和方法作为参数传给 children 函数 */}
      {children({ isFocused, inputHandlers })}
      <Line style={{ backgroundColor: isFocused ? '#1677ff' : '#d9d9d9' }} />
    </FormGroup>
  );
}

使用时的写法：

<FormField>
  {({ isFocused, inputHandlers }) => (
    <input 
      type="text" 
      placeholder={isFocused ? "正在输入..." : "请输入内容"}
      {...inputHandlers}
      {/* 可以自由追加自定义事件逻辑 */}
      onFocus={(e) => {
        inputHandlers.onFocus(e);
        console.log('用户自定义的聚焦逻辑');
      }}
    />
  )}
</FormField>

这个方案没有元素克隆的属性覆盖风险，完全把控制权交给组件使用者，也支持更复杂的多元素布局场景。

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