Question

由于某种原因，onClick不会触发一次，但是会被触发两次。 this.props.PostLike(id)动作将被触发，我该怎么做才能使其仅单击一下即可工作。

此外，只需单击一下，心脏状态就可以正常工作。仅需单击this.props.postLike即可使其工作。

使用e.preventDefault()不能解决问题。

    ....
    clickLike = (id) => {
        this.props.postLike(id);
        // toggles between css class
        this.setState({
            heart: !this.state.heart
        })
    }
    render(){
       return(
            <div style={{float:'right', fontSize: '1.5em', color:'tomato'}} >
            <i style={{ marginRight: '140px'}} className={this.state.heart ? 'fa fa-heart':'fa fa-heart-o' }>
                    <span style={{ marginLeft: '6px'}}>
                        <a href="#" onClick={() =>this.clickLike(this.props.like)}>Like</a>   

                    </span>
                    {/* gets the like counts */}
                    <span style={{ marginLeft: '7px'}} >{this.props.likes}  </span>  

                </i>
            </div>       
       )
    }
}
const mapStateToProps = (state) => ({

})
const mapDispatchToProps = (dispatch) => ({

    postLike: (id) => dispatch( postLike(id))
    // Pass id to the DeletePost functions.
});
export default connect(null, mapDispatchToProps)(Like);

PostItem.js

import React, { Component } from 'react';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import moment from 'moment';
import Editable from './Editable';
import {connect} from 'react-redux';
import {UpdatePost, postLike, getCount} from '../actions/';
import Like from './Like';
import Axios from '../Axios';
const Styles = {
    myPaper: {
        margin: '20px 0px',
        padding: '20px'
    },
    button:{
        marginRight:'30px'
    }
}
class PostItem extends Component{
    constructor(props){
        super(props);
        this.state = {
            disabled: false,
            myId: 0,
            likes:0
        }
    }


    onUpdate = (id, title) => () => {
        // we need the id so expres knows what post to update, and the title being that only editing the title. 
        if(this.props.myTitle !== null){
            const creds = {
                id, title
            }
            this.props.UpdatePost(creds); 
        }
    }

    render(){
        const {title, id, userId, removePost, createdAt, post_content, username, editForm, isEditing, editChange, myTitle, postUpdate, Likes, clickLike, myLikes} = this.props
        return(
                  ......
                      {/* likes get like counts */}
                       <Like like={id} likes={myLikes} />
                  .......

Posts.js

render() {
        const {loading} = this.state;
        const {myPosts} = this.props
        console.log(this.state.posts);
        if (!this.props.isAuthenticated) {
            return (<Redirect to='/signIn'/>);
        }
        if (loading) {
            return "loading..."
        }
        return (
            <div className="App" style={Styles.wrapper}>
                <h1>Posts</h1>
                {/* <PostList posts={this.state.posts}/> */}
                <div>
                    {this.state.posts.map(post => (
                            <Paper key={post.id} style={Styles.myPaper}>
                                <PostItem myLikes={post.Likes.length} // right here
                                    myTitle={this.state.title} editChange={this.onChange} editForm={this.formEditing} isEditing={this.props.isEditingId === post.id} removePost={this.removePost} {...post}/>
                            </Paper>
                        ))}
                </div>
            </div>
        );
    }
}

PostList.js

import React, { Component } from 'react';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import moment from 'moment';
import {connect} from 'react-redux';
import { withRouter, Redirect} from 'react-router-dom';
import {DeletePost, postLike, UpdatePost,EditChange, GetPosts, getCount, DisableButton} from '../actions/';
import PostItem from './PostItem';
import _ from 'lodash';
const Styles = {
    myPaper: {
        margin: '20px 0px',
        padding: '20px'
    }
}
class PostList extends Component{
    constructor(props){
        super(props);
        this.state ={
            title: '',
            posts:[],
            loading:true

        }
    } 

    componentWillMount() {
        this.props.GetPosts();
    }
    componentWillReceiveProps(nextProps, prevState) {
        let hasNewLike = true;
        if (prevState.posts && prevState.posts.length) {
            for (let index = 0; index < nextProps.myPosts.length; index++) {
                if (nextProps.myPosts[index].Likes.length !== prevState.posts[index].Likes.length) {
                    hasNewLike = true;
                }
            }
        }
        if (hasNewLike) {
            this.setState({posts: nextProps.myPosts, loading: false}); // here we are updating the posts state if redux state has updated value of likes
        }
    }
    // Return a new function. Otherwise the DeletePost action will be dispatch each
     // time the Component rerenders.
    removePost = (id) => () => {
        this.props.DeletePost(id);
    }

    onChange = (e) => {
        e.preventDefault();
        this.setState({
            title: e.target.value
        })
    }
    formEditing = (id) => ()=> {;
        this.props.EditChange(id);
    }
    render(){
        const { posts, loading} = this.state;

        // console.log(this.props.posts)
        // console.log(this.props.ourLikes);
        if(loading){
            return "loading..."
        }
        return (
          <div>
            {this.state.posts.map(post => (

              <Paper key={post.id} style={Styles.myPaper}>
                <PostItem
                  myLikes={post.Likes.length} // right here
                  myTitle={this.state.title}
                  editChange={this.onChange}
                  editForm={this.formEditing}
                  isEditing={this.props.isEditingId === post.id}
                  removePost={this.removePost}
                  {...post}

                />
              </Paper>
            ))}
          </div>
        );
    }
}
const mapStateToProps = (state) => ({
    isEditingId: state.post.isEditingId,
    myPosts: state.post.posts, 
})
const mapDispatchToProps = (dispatch) => ({
    // pass creds which can be called anything, but i just call it credentials but it should be called something more 
    // specific.
    GetPosts: () => dispatch(GetPosts()),
    EditChange: (id) => dispatch(EditChange(id)),
    UpdatePost: (creds) => dispatch(UpdatePost(creds)),
    postLike: (id) => dispatch( postLike(id)),
    // Pass id to the DeletePost functions.
    DeletePost: (id) => dispatch(DeletePost(id))
});
// without withRouter componentWillReceiveProps will not work like its supposed too.
export default withRouter(connect(mapStateToProps,mapDispatchToProps)(PostList));

Answer 1

这可能与您设置的逻辑无关，而与html标记本身有关。如果您要加入该事件并进行console.log记录，则可能会发现实际上并不是在第一次单击时就击中了标签，而是它的外部元素之一。尝试将标签及其内部的所有其他内容包装在标签中，然后将onClick逻辑放到按钮中，您将获得更好的结果。

     <div style={{float:'right', fontSize: '1.5em', color:'tomato'}} >
        <button onClick={() =>this.clickLike(this.props.like)}>
            <i style={{ marginRight: '140px'}} className={this.state.heart ? 'fa fa-heart':'fa fa-heart-o' }>
                <span style={{ marginLeft: '6px'}}>
                    <a href="#">Like</a>   

                </span>
                {/* gets the like counts */}
                <span style={{ marginLeft: '7px'}} >{this.props.likes}  </span>  

            </i>
          </button>
       div>

Answer 2

尝试这样做：

clickLike = (id) => () => {
    this.props.postLike(id);
    // toggles between css class
    this.setState({
        heart: !this.state.heart
    })
}
<a href="#" onClick={this.clickLike(this.props.like)}>Like</a>

Answer 3

在将箭头功能与 this 关键字一起使用时，请务必小心，因为它不引用当前对象，而是引用其父对象。

Answer 4

SELECT
    t.Team_Name,
    COUNT(*) AS cnt
FROM Teams t
INNER JOIN Member m
    ON t.Team_Number = m.Team_Number
GROUP BY t.Team_Name
HAVING COUNT(*) = (SELECT MAX(cnt) FROM (SELECT COUNT(*) AS cnt
                                         FROM Teams t
                                         INNER JOIN Member m
                                             ON t.Team_Number = m.Team_Number
                                         GROUP BY t.Team_Name) t );

尝试使用异步等待

 clickLike = async(id) => {
    await this.props.postLike(id);
    // toggles between css class
    this.setState({
        heart: !this.state.heart
    })
 }

单击两次后触发onClick函数

4 个答案: