Reactjs React通用设置钩子函数，可在多个钩子上工作

我正在尝试创建一个函数，该函数在React Native中向输入字段返回一个清晰的图标。 我想向图标发送一个click事件，因为这是一个处理click的事件，但是如何让函数接受一个hook setter并执行传递的代码呢

例如：如果单击了邮件的清除图标，则设置邮件挂钩值：“”，与邮件输入相同。下面的代码将生成一个无限循环

const [mail, setMail] = useState({ value: "", placeholder: "E-mail" })
const [password, setPassword] = useState({ value: "", placeholder: "Password" })

const clearIcon = (props: { setHook??: any }) => {  
    if (props.value.length > 0) {            
            return (
                <TouchableOpacity onPress={() => props.setHook()}> //Must work dynamically for all hooks
                    <MaterialIcons name="clear" size={30} color={Colors.themeWhite} />
                </TouchableOpacity>
            )                        
    }

    else
        return (
            <AntDesign name="mail" size={30} color="transparent" />
        )
}

 <Input
     value={mail.value}
     ...
     rightIcon={clearIcon({sethook: setMail({...mail, value: ""})})}
 />
 <Input
     value={password.value}
     ...
     rightIcon={clearIcon({sethook: setPassword({...password, value: ""})})}
 />

const[mail，setMail]=useState（{value:，占位符：“E-mail”}）
const[password，setPassword]=useState（{value:，占位符：“password”}）
常量clearIcon=（道具：{setHook？？？：any}）=>{
如果（props.value.length>0）{
返回(
props.setHook（）}>//必须为所有挂钩动态工作
)                        
}
其他的
返回(
)
}

创建

ClearIcon

作为组件

const ClearIcon = (props: { setHook: any }) => {
  return props.value.length > 0 ? (
    <TouchableOpacity onPress={() => props.setHook()}>
      {" "}
      //Must work dynamically for all hooks
      <MaterialIcons name="clear" size={30} color={Colors.themeWhite} />
    </TouchableOpacity>
  ) : (
    <AntDesign name="mail" size={30} color="transparent" />
  );
};

constclearicon=（道具：{setHook:any}）=>{
返回props.value.length>0(
props.setHook（）}>
{" "}
//必须为所有挂钩动态工作
) : (
);
};

更新输入组件以接受rightIcon作为返回组件的函数，然后在输入中使用它

<Input
     value={mail.value}
     ...
     rightIcon={() => <ClearIcon sethook={() => setMail({...mail, value: ""})}/>}
 />
 <Input
     value={password.value}
     ...
     rightIcon={() => <ClearIcon sethook={() => setPassword({...password, value: ""})}/>}
 />

setMail（{…mail，值：'}）}/>
/>
setPassword（{…密码，值：'}）}/>}
/>