本文介绍如何通过状态提升与回调函数，使父组件能实时感知并响应子组件 autocomplete 的选中状态，从而动态控制按钮禁用/启用及重置逻辑。
本文介绍如何通过状态提升与回调函数，使父组件能实时感知并响应子组件 autocomplete 的选中状态，从而动态控制按钮禁用/启用及重置逻辑。
在使用 React + MUI 的 Autocomplete 组件时，常需将选中值的状态同步至父组件，以驱动其他 UI 行为（如按钮禁用、表单提交校验或重置操作）。由于 SearchRole 是受控的封装组件（基于 Controller 和 react-hook-form），其内部值不直接暴露给父组件，因此需显式建立父子通信通道。
✅ 正确做法：状态提升 + 回调传递
1. 父组件定义状态与更新方法
在父组件中声明布尔状态 isRoleSelected，用于标识是否有有效选项被选中，并将状态更新函数 setIsRoleSelected 作为 prop 传入 SearchRole：
import { useState } from 'react';
function ParentComponent() {
const [isRoleSelected, setIsRoleSelected] = useState(false);
return (
<formprovider><searchrole name="roles" placeholder="Search via Role Name" options="{rolesOptions}" isloading="{isLoading}" setisselected="{setIsRoleSelected}"></searchrole><button label="search" disabled></button>
<button label="reset" onclick="{()"> {
setIsRoleSelected(false); // ✅ 重置状态
// 注意：还需清空表单字段值（见下文）
}}
/>
</button></formprovider>
);
}
2. 子组件（SearchRole）触发状态更新
在 SearchRole.jsx 中接收 setIsSelected prop，并在 Autocomplete 的 onChange 回调中同步更新：
// SearchRole.jsx
<controller name="{name}" control="{control}" render="{({" field: ref onchange ...field> (
<autocomplete ... props onchange="{(_," data> {
onChange(data); // ? 同步到 react-hook-form 表单状态
setIsSelected(!!data); // ? 同步到父组件状态：非 null/undefined 即视为已选
}}
// ... 其余配置
/>
)}
/></autocomplete></controller>
? !!data 是安全判断：Autocomplete 的 onChange 第二个参数在用户清除选择时为 null，选中时为对应 option 对象，因此 !!data 准确反映“是否已选”。
⚠️ 注意事项与增强建议
-
重置按钮需联动表单值：仅设置 isRoleSelected = false 不会清空 Autocomplete 显示值或表单字段。应在 onClick 中同时调用 resetField 或 setValue：
<button label="reset" onclick="{()"> { setIsRoleSelected(false); setValue('roles', null); // ? 使用 react-hook-form 的 setValue 清空字段 }} /></button> 避免重复渲染：若 rolesOptions 频繁变化，建议对 setIsSelected 进行 useCallback 包装，防止子组件不必要的重渲染。
扩展性考虑：如需获取具体选中值（而不仅是布尔状态），可改为传递 (value: OptionType | null) => void 类型的回调，父组件内自行处理业务逻辑。
通过这一模式，父子组件职责清晰：子组件专注渲染与交互，父组件掌控状态流与业务逻辑，符合 React 最佳实践，也便于后续扩展多字段联动或表单验证。
