Question

我正在尝试创建一个函数，该函数将一个清晰的图标返回到React Native中的输入字段。我有一个向图标发送click事件的想法，因为那是处理单击的事件，但是如何使该函数接受一个挂钩设置程序并执行传递的代码？

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

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: ""})})}
 />

Answer 1

将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" />
  );
};

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

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

反应适用于多个挂钩的通用集挂钩函数

1 个答案: