使用搜索/过滤器逻辑时的过滤器问题-React Native

Question

我正在使用我的React Native App挣扎！！！我有一个简单的Flatlist。我有一个带有过滤器选项的TextInput。在TextInput内部单击。出现过滤器下拉列表。

单击该筛选器，它将出现在TextInput中。

需要一些样式帮助！！！它看起来应该像这样。如果不是这样的话，至少在它周围放一个盒子是可以的。

我尝试了一个按钮-React Native元素。太令人沮丧了。我不能使用任何第三方库（公司政策）。

TextInput代码：

                      <Icon type='materialicons' name='search'  />    // search icon


                      <Button icon={<Icon name="check"/>}.  //my attempt to create a button around the filter 
                              type='clear' title ={val}
                              onPress={()=>{this.handleFilterIcon(false); this.setFilt(false)}}/>



                  <TextInput       // Text Input
                    value={value} 
                    placeholder='Search Here...'
                    onChangeText={(text)=>{this.handleSearch(text, true);this.renderDropDown(false)}}  
                    onTouchStart={()=>{this.setTempNotifications();this.renderDropDown(true)}}
                    style={{ height: 40, flex: 1}}
                    autoCapitalize='none'
                    selectTextOnFocus={true}
                    label='input'
                  />

                  <Icon type='materialicons' name='cancel' onPress={()=>{} /> // Clear Icon

                  <Button title='Cancel' 
                  buttonStyle={{backgroundColor:'#D3D3D3', borderColor: 'grey', borderRadius: 6 , borderWidth: 1, height: 40}}
                  onPress={()=>{} />   // Cancel button

任何人都请告诉我最有效的方法！！

Answer 1

我看到的唯一方法是，因为您不必使用第三方库，这是：

1. 在输入旁边创建一个空标签。用position:relative
将这两个分隔符
2. 输入输入后，立即在此标签中输入相同的文本。使用样式自定义此标签：position:absolute;background:grey...

只是给您一些想法，这是JQuery中的实现。您必须向前推进这一步，并在您遇到困难的地方提出具体问题。

function inputChange(val){
  $('label').text(val);
  $('input').val("");
}

label{
  border:1px solid;
  border-radius: 5px;
  position: absolute;
  background: grey;
  left:2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
 <input type="text" onchange="inputChange(this.value)"/>
  <label></label>
</div>

在React中，相同的实现可能看起来像这样。您可以使用此实现创建文件，将其导入App.js中并查看。向前推进这个想法，并根据需要更改样式和行为。

import React, { Component } from 'react';
class CustomInputTextstyling extends Component {
    constructor(props) {
        super(props);
        this.state ={
            inputText: ""
        }

    }

    handleInputChange(e){
      this.setState({inputText: e.target.value});
    }

    render() {
        const wrapperDiv = {
            position: 'relative'
        }

        const label = {
            border:'1px solid',
            borderRadius: '5px',
            position: 'absolute',
            background: 'grey',
            left:'2px'
          }
        return (
            <div style={wrapperDiv}>
                <input type = "text" onBlur = {this.handleInputChange.bind(this)}></input>
                <label style={label}>{this.state.inputText}</label>
            </div>
        );
    }
}

export default CustomInputTextstyling;