のTextInputは

Question

を検索するときに1つのシンボルを入力した後、私はFlatList

<View style={styles.container}> 
    <FlatList data={this.state.restaurants} 
       renderItem={({ item }) => this.renderItem(item.restaurant)} 
       keyExtractor={restaurant => restaurant.key} 
       ListHeaderComponent={() => this.renderHeaderComponent()} 
       ItemSeparatorComponent={this.renderSeparator}/> 
    </View> 

を持っており、ヘッダにそれをのTextInputを持ってフォーカスを失いました。私は検索バーとしてTextInputを使用しています。

renderHeaderComponent() { 
    return(
     <View style={{ flexDirection: 'row', marginTop: 10, borderBottomColor: '#CED0CE', borderWidth: 1, borderColor: 'transparent' }}> 
     <Icon name='search' size={30} style={{ marginLeft: 10, marginRight: 10 }}/> 
     <TextInput 
      style={{height: 40, flex: 1}} 
      onChangeText={(text) => this.onChangeText(text)} 
      placeholder='Type text for search' 
      clearButtonMode='while-editing' 
      value={this.state.searchText} 
     /> 
     </View> 
    ); 
    }; 

私のデータをフィルタリングします。

onChangeText(text) { 
    const filteredRestaurants = _.filter(this.props.list, (restaurantObject) => { 
     const restaurant = restaurantObject.restaurant; 
     const result = restaurant.name.trim().toLowerCase().includes(text.trim().toLowerCase()); 
     return result; 
    }) 
    this.setState({ 
     searchText: text, 
     restaurants: filteredRestaurants 
    }); 
    } 

問題は次のとおりです。 TextInputに1つのシンボルを入力すると、TextInputからすぐにフォーカスが失われますか？入力中にTextInputでフォーカスを維持するにはどうすればよいですか？

Answer 1

あなたはListHeaderComponentはタイプReactClassのものであり、あなたの現在の方法は基本的に再作成し、あなたが望むものではありませんそのrenderたびにデータ更新を、再結合して、このためにauto-boundメソッドを使用する必要があります。この概念は、さらに今、あなたが変更したい）あなたは

1）

ListHeaderComponent={this.renderListHeader}

2にごListHeaderComponent小道具を変更する必要があり、あなたの問題を解決するために、あなたの例のために、

とにかくthis commentに説明されていますrenderHeaderComponentメソッドがauto-bound methodになり、これを行うと、データを変更するたびに新しいレンダリングがインスタンス化されません（または、TextInputにテキストを入力します）

renderListHeader =() => (
    <View style={{ flexDirection: 'row', marginTop: 10, borderBottomColor: '#CED0CE', borderWidth: 1, borderColor: 'transparent' }}> 
     <Icon name='search' size={30} style={{ marginLeft: 10, marginRight: 10 }}/> 
     <TextInput 
      style={{height: 40, flex: 1}} 
      onChangeText={(text) => this.onChangeText(text)} 
      placeholder='Type text for search' 
      clearButtonMode='while-editing' 
      value={this.state.searchText} 
     /> 
    </View> 
)