时间戳

首页 > 解决方案 > 如何根据反应js中的内容设置计数

reactjs - 如何根据反应js中的内容设置计数

问题描述

在这里，我附上了一些代码，请查找并给出正确的解决方案。 在此处输入图像描述

when we search the name, based on the name I want to display the count value.

例如，来了 3 个名字，所以找到了 3 个结果。我想要的这种方式。过滤器工作正常。只有我想跟踪记录。这是代码。

app.js

import Filter from './component/Filter';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Filter />
      </header>
    </div>
  );
}

export default App;

这里我附加了 Filter.js 组件 Filter.js

import React, { Component } from 'react';

class Filter extends Component{

    constructor(props){
        super(props);
        this.state={
            searchTerm: "",
            names: [{
                "first_name": "Mack"
              }, {
                "first_name": "Andres"
              }, {
                "first_name": "Bee"
              }, {
                "first_name": "Donni"
              }, {
                "first_name": "Pippy"
              }, {
                "first_name": "Chrystel"
              }, {
                "first_name": "Etienne"
              }, {
                "first_name": "Elberta"
              }, {
                "first_name": "Brion"
              }, {
                "first_name": "Aurea"
              }, {
                "first_name": "Kerry"
              }, {
                "first_name": "Mervin"
              }, {
                "first_name": "Georgianna"
              }]
        }
    }

    render(){
       return <>
       <div className="filterList">
            <input className="slice-item" type="fileName" placeholder="search name" onChange= {event => {this.setState({searchTerm: event.target.value})}} />
            <div className="slice-item resultCount">
                <span className="num">0</span> results found
            </div>
       </div>
       
        {
            this.state.names.filter((name) => {
                if(this.state.searchTerm === ""){
                    return name;
                }else if(name.first_name.toLocaleLowerCase().includes(this.state.searchTerm.toLocaleLowerCase())){
                    return name;
                }
            }).map((name) =>(
                <h4>{name.first_name}</h4>
            ))
        }
       </>
    }
}

export default  Filter;

  1. 几乎完成了。我只想应用结果计数。

     Anyone can plz post your answer.

标签： reactjs

解决方案

只需将过滤器逻辑移到返回之外即可获取名称列表。那么该列表的长度就是结果的数量。

render(){
       const filteredNames = this.state.names.filter((name) => {
                if(this.state.searchTerm === ""){
                    return name;
                }else if(name.first_name.toLocaleLowerCase().includes(this.state.searchTerm.toLocaleLowerCase())){
                    return name;
                });
       const renderResultCount = this.state.searchTerm && this.state.searchTerm.length > 0;
       return <>
       <div className="filterList">
            <input className="slice-item" type="fileName" placeholder="search name" onChange= {event => {this.setState({searchTerm: event.target.value})}} />
            <div className="slice-item resultCount">
                { renderResultCount ? <span className="num">{filteredNames.length}</span> results found : null}
            </div>
       </div>
       
        {
            filteredNames.map((name) =>(
                <h4>{name.first_name}</h4>
            ))
        }
       </>
    }

编辑：由于作者在评论中的请求，添加了文本的条件渲染

推荐阅读