Реагировать Сортировать по Нравится

Question

Я пытаюсь выяснить, как добавить функцию onClick, которая затем сортирует лайки в порядке убывания.АКА каждый проект имеет кнопку «как».Я хочу добавить еще одну кнопку на страницу, чтобы позволить пользователю сортировать лайки проекта в порядке убывания.

import React from 'react';
import ProjectsListItem from './ProjectsListItem'

const Project = ({ projects }) => {


  const renderProjects = projects.projects.map(project =>
   <ProjectsListItem project={project}  key={project.id}/>

);


return (
  <div className="container">
    <div className="row">
      {renderProjects}
    </div>
  </div> 
);
};

export default Project;

Страница 2

class ProjectsListItem extends Component {

handleOnClick = () => {
this.props.likeProject(this.props.project)
 }

 onClick = () => {
 this.props.sortBy(this.props.project.like)
 } 


render() {
 return(
   <div>
   <div className="col-sm-4">
    <div className="container-fluid text-left">
      <h4> <Link key={this.props.project.id} to= 
     {`/projects/${this.props.project.id}`}>{this.props.project.title} 
      </Link> </h4>
      <h5> {this.props.project.studio}</h5>
      <CounterButton project={this.props.project} likeProject=  
    {this.handleOnClick}/>
    </div>
  </div>
  </div>
  )
 }
 }
  const mapStateToProps = (state) => {
 return {
  projects: state.projects
   }
  }
 export default connect(mapStateToProps, {likeProject}) 
 (ProjectsListItem);

Answer 1

Вам потребуется создать обработчик событий, такой как https://reactjs.org/docs/handling-events.html

. В этом случае вы, вероятно, захотите выполнить

onSortClick(e) {
 e.preventDefault();

 this.props.sorted = true
}

, привязав это к вашему обработчику кликов следующим образом:

 <CounterButton project={this.props.project} likeProject=  
    {this.onSortClick.bind(this)}/>

Надеюсь, это поможет.