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});
}

我已将状态设置为持久保存用户在搜索栏中输入的内容，因为它会在渲染时清除。每次组件重新渲染时（在用户输入/删除的每个字符上）键盘都会保持关闭，这样可以正常工作。

为了尝试解决这个问题，我尝试使用像这样的引用来关注输入

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

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

Here's a gif of the issue

要解决这个问题，我想把TextInput转移到一个单独的组件（只有那个输入字段），然后用我的列表添加该组件。但是，我不得不经常传回文本数据来过滤我的列表，增加了更多的复杂性。对此可能有一个更简单的解决方案吗？

Answer 1

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

值

要为文本输入显示的值。 TextInput是受控组件，＆gt;这意味着如果＆gt;提供，则强制本机值与此值prop匹配。对于大多数用途，这很有效，但在某些情况下，这可能会导致＆gt;闪烁 - 一个常见原因是通过保持值相同来阻止编辑。在＆gt;除了简单地设置相同的值之外，还可以设置editable = {false}或＆gt;设置/更新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;

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

渲染时TextInput闪烁/波动行为

2 个答案: