React-Native：从ListView中的列表项搜索

The values or the Employee Names are retrieved from Firebase database. I need to search the employees by Name, so as to easily access them on the ListView. For example, if i type'S' , all the employee names with "S" should be displayed same as the ListView, which is touchable.

从Firebase数据库中检索值或员工姓名。我需要按名称搜索员工,以便在ListView上轻松访问它们。例如,如果我键入'S',则所有具有“S”的员工姓名应显示为与可触摸的ListView相同。

Help me implement the Search functionality from the List Items in the ListView.

帮助我实现ListView中列表项的搜索功能。

class EmployeeList extends Component {
    componentWillMount() {
        this.props.employeesFetch();

        this.createDataSource(this.props);
      }

      componentWillReceiveProps(nextProps) {
        // nextProps are the next set of props that this component
        // will be rendered with
        // this.props is still the old set of props

        this.createDataSource(nextProps);
      }

      createDataSource({ employees }) {
        const ds = new ListView.DataSource({
          rowHasChanged: (r1, r2) => r1 !== r2
        });

        this.dataSource = ds.cloneWithRows(employees);
      }

      renderRow(employee) {
        return <ListItem employee={employee} />;
      }



      render() {

        return (
         <View>
         <TextInput 
       style={styles.TextInputStyleClass}
       underlineColorAndroid='transparent'
       placeholder="Quick Search"
        />
          <ListView
            enableEmptySections
            dataSource={this.dataSource}
            renderRow={this.renderRow}
          />
        </View>
        );
      }
    }

    const styles = {
      TextInputStyleClass:{

        textAlign: 'center',
        height: 40,
        borderWidth: 1,
        borderColor: '#ddd',
        borderRadius: 3 ,
        backgroundColor : "#FFFFFF"

        }

  };

    const mapStateToProps = state => {
      const employees = _.map(state.employees, (val, uid) => {
        return { ...val, uid };
      });

      return { employees };
    };

    export default connect(mapStateToProps, { employeesFetch })(EmployeeList);

1 个解决方案

#1

Try these methods.

试试这些方法。

In your state have these variables

在你的州有这些变量

i) Search text (which you are entering)
ii) a boolean value for knowing whether the user is searching or not
iii) an array for storing filtered array

i)搜索文本(您正在输入)ii)用于了解用户是否正在搜索的布尔值iii)用于存储已过滤数组的数组

In your textinput onTextChange function, check if the text is empty or not .

在textinput onTextChange函数中,检查文本是否为空。

If it is empty set the boolean value as false,
else set the boolean true and filter the array based on search string (you can use lodash for this)

如果为空,则将布尔值设置为false,否则将布尔值设置为true并根据搜索字符串过滤数组(可以使用lodash)

In your list view render the dataSource based on the boolean value.

在列表视图中,基于布尔值呈现dataSource。

i.e) dataSource={isSearching ? filteredArray : this.dataSource}

即)dataSource = {isSearching? filteredArray:this.dataSource}

1 个解决方案

#1

更多相关文章

随机推荐