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

Question

我正在为我的 React Native 应用程序苦苦挣扎！！！！
我有一个简单的平面列表。
我有一个带有过滤器选项的 TextInput。
在 TextInput 内部单击。出现一个过滤器下拉菜单。

点击出现在 TextInput 中的过滤器。

需要一些帮助来设计这个！！！它应该看起来像这样。如果不是到这种程度，至少周围有一个框就可以了。

我尝试使用 Button - React Native 元素。真是太令人沮丧了。我不能使用任何 3rd 方库（公司政策）。

文本输入代码：

                      <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 的 div 将这两个包裹起来
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;