如何在父组件中获取Autocomplete选中值并控制按钮状态？

要实现你需要的功能，只需在父组件中利用React Hook Form的watch和reset方法，结合表单状态控制按钮行为即可，以下是具体实现：

父组件修改代码 #

import { useForm, FormProvider } from "react-hook-form";
// 导入你的Button、SearchRole组件，以及rolesOptions、isLoading等变量

const ParentComponent = () => {
  // 初始化表单，给roles字段设初始空值
  const formMethods = useForm({
    defaultValues: {
      roles: undefined
    }
  });

  // 实时监听roles字段的选中值
  const selectedRole = formMethods.watch("roles");

  // 重置按钮点击事件：清空roles字段
  const handleReset = () => {
    formMethods.reset({ roles: undefined });
  };

  return (
    <FormProvider {...formMethods}> 
      <SearchRole
        name="roles"
        placeholder="Search via Role Name"
        options={rolesOptions}
        isLoading={isLoading}
      />
      {/* 搜索按钮：未选中角色时禁用 */}
      <Button 
        label="search" 
        disabled={!selectedRole}  
      />
      {/* 重置按钮：有选中角色时可点击，点击清空选中值 */}
      <Button 
        label="reset" 
        disabled={!selectedRole}
        onClick={handleReset}
      />
    </FormProvider>
  );
};

export default ParentComponent;

关键逻辑说明 #

• 获取选中值：通过formMethods.watch("roles")可以实时获取Autocomplete的选中项，这个值会和SearchRole组件中Controller绑定的roles字段同步。
• 搜索按钮禁用规则：当selectedRole为空（未选中任何角色）时，按钮设置为禁用状态；选中后自动启用。
• 重置按钮逻辑：
  • 只有当有选中角色时，重置按钮才可用（disabled={!selectedRole}）；
  • 点击按钮时调用formMethods.reset将roles字段重置为初始空值，SearchRole组件会自动感知这个变化，Autocomplete会清空选中状态。

无需修改SearchRole组件的原因 #

你的SearchRole组件已经正确通过Controller绑定了name="roles"，并且在Autocomplete的onChange中把选中数据传给了React Hook Form的onChange方法，这部分逻辑已经能确保表单状态同步，不需要额外修改。另外你设置的disableClearable={true}也符合需求，让用户只能通过重置按钮清空选中值。

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