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)}/>

希望这会有所帮助。

反应排序方式

1 个答案: