这个onBlur不是我想要的方式工作

Question

这里我想让这个onBlur显示另一个文本或输入字段，但每当我清除值时，它应该隐藏，但现在它不是我想要的方式工作。简而言之，每当我在输入框中输入内容并失去焦点时它就会显示子输入框但当清除所有焦点时它应该会隐藏但它不起作用这里是代码

<Typography
color="#05445E"
fontFamily="'Jost', sans-serif"
fontSize={15}
>
Email
</Typography>
<Input
fullWidth
name="email"
value={user.email}
onChange={handleChange}
disableUnderline={true}
onBlur={handleOTP}
className={classes.inputEmail}
endAdornment={
<>
{user.clearEmail ? (
<IconButton
onClick={() => clearValue("email", "clearEmail")}
>
<ClearIcon />
</IconButton>
) : (
""
)}
</>
}
/>
{showSecondInput && (
<>
<Typography
color="#05445E"
fontFamily="'Jost', sans-serif"
fontSize={15}
sx={{ mt: "15px" }}
>
Enter OTP
</Typography>
<Input
className={classes.inputEmail}
fullWidth
type="password"
/>
</>
)}

这是我使用过的状态

const [user, update_user] = useState({
user_name: "",
email: "",
clearUser: false,
clearEmail: false,
});

const clearValue = (key, show) => {
update_user({ ...user, [key]: "", [show]: false });
};
const [showSecondInput, setShowSecondInput] = useState(false);
const handleOTP = (e) => {
const { name:key } = e.target;
if(key === "email") setShowSecondInput({ ...showSecondInput, [key]: "", clearEmail: false });
};
const handleChange = (event) => {
const { name: key, value } = event.target;
if (value) {
if (key === "user_name")
update_user({ ...user, [key]: value, clearUser: true });
else if (key === "email")
update_user({
...user,
[key]: value,
clearEmail: true,
});
} else
update_user({
...user,
[key]: "",
clearUser: false,
clearEmail: false,
});
};

clearValue函数工作顺利，没有任何问题，问题是在模糊事件..

Answer 1

您可以通过检查name来做到这一点，以防您在handleOTP函数中有更多的onBlur。然后检查value是否为空字符串，并基于此设置状态。

const handleOTP = (e) => {
const { name, value } = e.target;
if (name !== "email") return;
if (value === "") {
setShowSecondInput(true);
} else {
setShowSecondInput(false);
}
};

Answer 2

我尽量使用touchableopacityonpress而不是onBlur。

简单地重构你的代码，允许一个onPress同时执行多个函数。

的例子:

<TouchableOpacity onPress={() => navigation.navigate("Signin")}>
<TouchableOpacity onPress={clearErrorMessage}>
<Text style={styles.link}>Already have an account? Sign in instead</Text>
</TouchableOpacity>
</TouchableOpacity>