如何从对象数组中搜索？并通过单击列名按升序和降序对数据进行排序？

Question

我是 Reactjs 的初学者，我从对象数组创建数组并创建表现在我想对创建的表执行搜索操作。我尝试了很多，但我无法得到我应该在 updateSearch() 函数中编写的内容来从表中搜索并显示搜索结果，以及 通过单击列名通过升序和降序对数据进行排序。所以，请帮我解决这个问题

    class Hello extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
          search: '',
            Data:[
                {
                    id: 1,
                    fullName: 'abc',
                    email:'example@gmail.com',
                    
                },
                {
                    id: 2,
                    fullName: 'qps',
                    email:'qps@gmail.com',
                    
                },
                {
                    id: 3,
                    fullName: 'qwe',
                    email:'qwe@gmail.com',
                    
                },
             ]
        }
    }
    updateSearch(event){
        
        this.setState({
            search : event.target.value
        });
        console.log(event.target.value);
    } 
   
        render() {
            return (
                
                <div>
                    <h1>welcome to React</h1>
                    <input type="text" placeholder="Enter item to be searched"  value={this.state.search} onChange={this.updateSearch.bind(this)} />
                    <table className="table table-hover table-dark">
                    
                    <tbody>
                        <tr>
                            <th>ID</th>
                            <th>Full Name</th>
                            <th>Email</th>
                        </tr>
                    {
                       this.state.Data.map((item,index)=>(
                        <tr key={item.id}>
                            
                            <td >{item.id}</td>
                        
                            <td >{item.fullName}</td>
                            <td>{item.email}</td>
                        </tr>
                    ))
                    }
                    </tbody>
                    </table>
    
                </div>
            )
        }
    }
    export default Hello

Answer 1

您可能正在尝试在组件中添加过滤器功能

class App extends Component {
  Data = [
      {
        id: 1,
        fullName: 'abc',
        email: 'example@gmail.com',

      },
      {
        id: 2,
        fullName: 'qps',
        email: 'qps@gmail.com',

      },
      {
        id: 3,
        fullName: 'qwe',
        email: 'qwe@gmail.com',

      },
    ];
  constructor(props) {
    super(props)
    this.state = {
      search: '',
      filteredArray: this.Data,

    }
  }
  updateSearch(event) {

    this.setState({
      search: event.target.value,
      filteredArray: this.Data.filter((data) => {
        return data.fullName.includes(event.target.value);
      })
    });

    console.log(event.target.value);
  }
  render() {
    return (

      <div>
        <h1>welcome to React</h1>
        <input type="text" placeholder="Enter item to be searched" value={this.state.search} onChange={this.updateSearch.bind(this)} />
        <table className="table table-hover table-dark">

          <tbody>
            <tr>
              <th>ID</th>
              <th>Full Name</th>
              <th>Email</th>
            </tr>
            {
              this.state.filteredArray.map((item, index) => (
                <tr key={item.id}>

                  <td >{item.id}</td>

                  <td >{item.fullName}</td>
                  <td>{item.email}</td>
                </tr>
              ))
            }
          </tbody>
        </table>

      </div>
    )
  }
}

Answer 2

您可以过滤Data.map中的项目，例如：

{ this.state.Data.filter((item) => {
    return !(this.state.search) // if search is not set, return all items
          || item.fullName.match(RegExp(search, 'i'))
          || item.email.match(RegExp(search, 'i'))
}).map((item,index)=>(
    <tr key={item.id}>                        
        <td >{item.id}</td>
        <td >{item.fullName}</td>
        <td>{item.email}</td>
    </tr>
)}

工作代码

class Hello extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      search: '',
      Data: [{
          id: 1,
          fullName: 'abc',
          email: 'example@gmail.com',

        },
        {
          id: 2,
          fullName: 'qps',
          email: 'qps@gmail.com',

        },
        {
          id: 3,
          fullName: 'qwe',
          email: 'qwe@gmail.com',

        },
      ]
    }
  }
  updateSearch(event) {
    this.setState({
      search: event.target.value
    });
  }
  render() {
     return (
         <div>
          <h1>welcome to React</h1>
          <input type="text" placeholder="Enter item to be searched"  value={this.state.search} onChange={this.updateSearch.bind(this)} />
          <table className="table table-hover table-dark">
          <tbody>
              <tr>
                  <th>ID</th>
                  <th>Full Name</th>
                  <th>Email</th>
              </tr>
              { 
              this.state.Data.filter((item) => {
            return !(this.state.search) // if search is not set, return all items
                    || item.fullName.match(RegExp(this.state.search, 'i'))
                    || item.email.match(RegExp(this.state.search, 'i'))
          }).map((item,index)=>(
            <tr key={item.id}>                        
                <td >{item.id}</td>
                <td >{item.fullName}</td>
                <td>{item.email}</td>
            </tr>
          ))}
          </tbody>
          </table>

      </div>

     )
  }
}

ReactDOM.render( < Hello / > , document.getElementById('root'));

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="root">
</div>