React服务端组件调用客户端组件时事件绑定报错求助

我想给以服务端组件为父组件的客户端组件添加事件，但出现报错。

错误信息 #

Error: Event handlers cannot be passed to Client Component props.
<... className=... onChange={function}>
^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.

已尝试方案 #

• 创建了一个“中间层”文件，但结果仍报错。
• 尝试将父组件改为客户端组件，但业务要求它必须是服务端组件。
• 尝试将Input组件改为服务端组件，但HTML原生input标签本身属于客户端组件，无法实现。

背景说明 #

我的父组件是服务端组件（标注"use server"），因为它需要连接数据库，代码如下：

"use server"

import "./Filtro.css"
import { EntityMetadata, EntityTarget, ObjectLiteral } from "typeorm"
import { GetColumns } from "@/SQL/SQLManager"
import { Calendar } from "../Calendar/Calendar"
import { Circle } from "../Polygons/Circle/Circle"
import Image from "next/image"
import { ColumnSearch } from "./_components/ColumnSearch/ColumnSearch"

type FilterProps<T> = { 
    entity: EntityTarget<T>, 
    except?: string[]
}

export async function Filter<T extends ObjectLiteral>({ entity, except } : FilterProps<T>) {
    const columns = (await GetColumns(entity))
        .filter((column) => 
            except != null ? except.indexOf(column.propertyName) : true
        );
    
    const changeEvent = (value: string) => {
        console.log(value);
    }

    return (
        <div className="filter-container">

            <div className="flex items-center gap-3.5 mb-3.5">
                {/* <div className="filter-circle"></div> */}
                <Circle width={40} height={40} className="bg-primary"/>
                <h2 className="text-2xl font-bold">Filtros</h2>
            </div>
            
            <div className="bg-section rounded-xl px-4 py-5">
                {
                    columns.map((column) => {
                        return <ColumnSearch 
                            entity={entity}
                            column={column}
                            className="bg-white text-black p-1.5 rounded-xl"
                            onInputChange={changeEvent}
                            />
                    })
                }
                
                <div className="relative mt-3.5">

                    <input type="text" className="filter-input p-2.5 rounded-3xl" placeholder="Buscar"/>
                    
                    <Image className="filter-magnifier" src="/white/svg/Magnifier.svg" width="24" height="24" alt="Magnifier"/>
                </div>
            </div>
        </div>
    )
}

它调用的ColumnSearch同样是服务端组件，该组件会渲染Input或Calendar组件，代码如下：

import { Calendar } from "@/components/Calendar/Calendar"
import { EntityTarget, ObjectLiteral } from "typeorm"
import { ColumnMetadata } from "typeorm/metadata/ColumnMetadata.js"
import './ColumnSearch.css'
import { Input } from "@/components/Input/Input"

type ColumnSearchProps<T> = {
    entity: EntityTarget<T>,
    column: ColumnMetadata,
    className?: string,
    onInputChange?: (value: string) => void
}

export async function ColumnSearch<T extends ObjectLiteral>({ entity, column, className, onInputChange } : ColumnSearchProps<T>) {
    console.log(column.type)

    return <div className='filter-option relative flex justify-between items-center cursor-pointer text-lg py-3.5'>
        {column.propertyName.replace("_", " ")}

        {
            column.type != Date ? 
                <Input className={className}/> : //onChange={onInputChange ? (e) => onInputChange(e.target.value) : undefined}
                <Calendar className={className}/>
        }
    </div>
}

而Input是标注"use client"的客户端组件，基于HTML原生input标签。问题在于无法给它添加事件处理器，因为其父组件是服务端组件，Input组件代码如下：

"use client"

import { ChangeEventHandler, RefObject, useRef } from "react"

type InputProps = {
    className?: string,
    onChange?: ChangeEventHandler<HTMLInputElement>,
    ref?: RefObject<HTMLInputElement>
}

export function Input({ className, onChange, ref } : InputProps) {
    return <input className={className} onChange={onChange} ref={ref}/>
}

解决方案 #

核心问题是Next.js服务端组件不能传递函数/事件处理器给客户端组件——服务端组件在服务器端渲染，无法直接关联客户端交互逻辑。正确的做法是把需要处理交互的部分封装成独立客户端组件，让服务端组件只负责数据获取，再把数据传递给客户端组件处理交互。

具体步骤 #

1. 将ColumnSearch改为客户端组件：给它加上"use client"指令，把原本在服务端组件Filter里的事件逻辑移到这个组件内部，由它自己管理交互。
2. 调整Filter的职责：Filter只负责从数据库获取列数据，传递给ColumnSearch，不再传递事件处理器。

改造后代码示例 #

• 客户端版本ColumnSearch：

"use client"
import { Calendar } from "@/components/Calendar/Calendar"
import { EntityTarget, ObjectLiteral } from "typeorm"
import { ColumnMetadata } from "typeorm/metadata/ColumnMetadata.js"
import './ColumnSearch.css'
import { Input } from "@/components/Input/Input"

type ColumnSearchProps<T> = {
    entity: EntityTarget<T>,
    column: ColumnMetadata,
    className?: string
}

export function ColumnSearch<T extends ObjectLiteral>({ entity, column, className } : ColumnSearchProps<T>) {
    // 客户端内部定义事件处理逻辑
    const handleInputChange = (value: string) => {
        console.log(value);
    }

    return <div className='filter-option relative flex justify-between items-center cursor-pointer text-lg py-3.5'>
        {column.propertyName.replace("_", " ")}

        {
            column.type != Date ? 
                <Input className={className} onChange={(e) => handleInputChange(e.target.value)}/> :
                <Calendar className={className}/>
        }
    </div>
}

• 修改后的Filter服务端组件：

"use server"

import "./Filtro.css"
import { EntityMetadata, EntityTarget, ObjectLiteral } from "typeorm"
import { GetColumns } from "@/SQL/SQLManager"
import { Calendar } from "../Calendar/Calendar"
import { Circle } from "../Polygons/Circle/Circle"
import Image from "next/image"
import { ColumnSearch } from "./_components/ColumnSearch/ColumnSearch"

type FilterProps<T> = { 
    entity: EntityTarget<T>, 
    except?: string[]
}

export async function Filter<T extends ObjectLiteral>({ entity, except } : FilterProps<T>) {
    const columns = (await GetColumns(entity))
        .filter((column) => 
            except != null ? except.indexOf(column.propertyName) : true
        );

    return (
        <div className="filter-container">

            <div className="flex items-center gap-3.5 mb-3.5">
                <Circle width={40} height={40} className="bg-primary"/>
                <h2 className="text-2xl font-bold">Filtros</h2>
            </div>
            
            <div className="bg-section rounded-xl px-4 py-5">
                {
                    columns.map((column) => {
                        return <ColumnSearch 
                            entity={entity}
                            column={column}
                            className="bg-white text-black p-1.5 rounded-xl"
                            />
                    })
                }
                
                <div className="relative mt-3.5">
                    <input type="text" className="filter-input p-2.5 rounded-3xl" placeholder="Buscar"/>
                    <Image className="filter-magnifier" src="/white/svg/Magnifier.svg" width="24" height="24" alt="Magnifier"/>
                </div>
            </div>
        </div>
    )
}

补充说明 #

如果需要把客户端交互数据传回服务端（比如提交过滤条件），可以使用Next.js的服务器动作（Server Actions）——在客户端组件里调用标注"use server"的函数即可，无需修改服务端组件的核心职责。

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