渲染时的文本输入闪烁/断断续续行为

Question

我是 React Native 的新手，我一直在研究一个搜索栏，当用户在字段中键入时过滤列表。这就是它的样子...

<TextInput style={{width: '100%', textAlign: 'center'}}
ref={(ref) => this.searchInput = ref}
placeholder="Search"
onChangeText={ (text) => this.onChangeText(text)}
value={this.state.search} />

这是我用于此行为的 onChangeText 方法

onChangeText(text) {
var filtered;
this.setState({search: text});
filtered = this.props.data.filter((item) => {
if(item.section) {
return true;
}
return (item.label.toLowerCase().includes(text.toLowerCase()));
});
this.setState({filteredList: filtered});
}

由于它在渲染时清除，因此我将状态设置为保留用户在搜索栏中键入的任何内容。这工作正常，除了每次组件重新渲染时键盘都会关闭(在用户输入/删除的每个字符上)。

为了尝试解决这个问题，我尝试使用这样的 refs 专注于输入

componentDidUpdate() {
if(this.searchInput) {
this.searchInput.focus();
}
}

但即便如此，键盘也会时不时地播放打开/关闭动画，并且无法顺利处理输入/删除。

这是问题的动图。

为了解决这个问题，我正在考虑将 TextInput 移动到一个单独的组件(仅包含该输入字段)，然后将该组件添加到我的列表中。但是，我必须不断将文本数据传回以过滤我的列表，从而增加了复杂性。也许有更直接的解决方案吗？

Answer 1

我有类似的问题，但我通过为textInput的宽度设置一个数字来解决我的问题。我不确定这是否与此有关。但是在我检查了官方文档后，它说，

价值

要为文本输入显示的值。TextInput 是一个受控组件，>这意味着如果提供>，本机值将被强制匹配此值属性。对于大多数用途，这很好用，但在某些情况下，这可能会导致>闪烁 - 一个常见原因是通过保持值相同来阻止编辑。除了简单地设置相同的值之外>，可以设置可编辑={false}，也可以>设置/更新maxLength以防止不需要的编辑而不会闪烁。

祝你好运！

Answer 2

这个问题的一个优雅的解决方案是在输入文本时不要不断更新组件的状态，而是在提交时更新它：

import React from 'react';
import { View } from 'react-native';
const MyComponent = () => {
let textValue;
function onFormSubmitted() {
// do something with textValue, update state
}
return (
<View>
<TextInput
onChangeText={(text) => {
textValue = text;
}}
onEndEditing={onFormSubmitted}
/>
</View>
);
};
export default MyComponent;

闪烁的原因似乎与组件的大小有关，状态的持续更新可能在小组件中起作用，但它本质上是浪费的。如果您不依赖于对某些内容的实时过滤，那么它应该是完全没有必要的。