React-Native防止状态更新时键盘失效



我有一个按钮,如果状态为false,状态是改变的,如果在数组中的每个项目上不满足一些条件,其中一个条件是文本字段应该包含一些东西,我检查该条件每次文本改变。条件工作,但每次我改变状态的键盘是解散。例如:每次输入或删除单词的第一个字母。

const [canSave, setCanSave] = useState<boolean>(true);
//this function is called each time one of the textfield is changed
const updateCanSave = () => {
for (let i = 0; i < currentSteps.length; i++) {
const step = currentSteps[i];
if (
(step.name.length > 0 && step.media === undefined) ||
(step.name === "" && step.media !== undefined)
) {
setCanSave(false);
break;
}
setCanSave(true);
}
};
return (
//the flatList renderItem contains many textfield and imagePicker
<FlatList
data={array}
...
ListFooterComponent={
<Button on Press={save} disable={!canSave}>Save</Button>
}
/>
)

虽然你不能这样做,但有很多方法可以通过

1)输入字段可以设置为autoFocus={true}。但是,这有个小问题。键盘仍然在每次更改后关闭,但在之后打开非常快,但不是那么好。

2)创建一些其他的字典(除了状态),并存储不同输入字段的值,并在输入字段失去焦点时更改状态(您可以使用onBlurprop of input field来检查)。

最新更新