如何增加/减少javascript中按钮的喜好？

Question

我想增加喜欢的人数而减少不喜欢的人数。 我已经实现了setState 在这里输入图像描述

    import React, { Component } from 'react';
        import { Row, Col, Card, CardHeader, CardBody, CardSubtitle, Button } from 'reactstrap';
        import index from './index.css'

        class MovieList extends Component {
          constructor(props) {
            super(props);
          }
          state ={
              count:0
          }

          incrementMe = () => {
            let newCount = this.state.count + 1
            this.setState({
              count: newCount
            })
          }
          decrementMe = () => {
            let newCount = this.state.count - 1
            this.setState({
              count: newCount
            })
          }

          render () {
            let { id, title, category, likes} = this.props.movie;
            return (
              <div>
              <Row>
                <Col>
                <Card>
                    <CardHeader><strong>{title}</strong></CardHeader>
                   <CardBody>
                    <CardSubtitle>{category}</CardSubtitle>
                    <Button>👍 : {this.state.count}</Button> &nbsp;
                    <Button>👎 : {this.state.count}</Button>
                    <br />
                    <Button color="danger" onClick={() => this.props.removeMovie(id)}>Delete</Button>
                  </CardBody>
                </Card>
                </Col>
              </Row>
              </div>
            )
          }
        }

        export default MovieList;

我所附的图像是当前代码的输出，以下代码是我在卡中实现的电影列表

import React, { Component } from 'react';
import { Container, Row, Col } from 'reactstrap';
import MovieList from './MovieList';

class Main extends Component {
  constructor() {
    super();
    this.state = {
      movies: [
        {
        id: '1',
        title: 'Oceans 8',
        category: 'Comedy',
        likes: 4,
        dislikes: 1
      }, {
        id: '2',
        title: 'Midnight Sun',
        category: 'Comedy',
        likes: 2,
        dislikes: 0
      }, {
        id: '3',
        title: 'Les indestructibles 2',
        category: 'Animation',
        likes: 3,
        dislikes: 1
      }, {
        id: '4',
        title: 'Sans un bruit',
        category: 'Thriller',
        likes: 6,
        dislikes: 6
      }, {
        id: '5',
        title: 'Creed II',
        category: 'Drame',
        likes: 16,
        dislikes: 2
      }, {
        id: '6',
        title: 'Pulp Fiction',
        category: 'Thriller',
        likes: 11,
        dislikes: 3
      }, {
        id: '7',
        title: 'Pulp Fiction',
        category: 'Thriller',
        likes: 12333,
        dislikes: 32
      }, {
        id: '8',
        title: 'Seven',
        category: 'Thriller',
        likes: 2,
        dislikes: 1
      }, {
        id: '9',
        title: 'Inception',
        category: 'Thriller',
        likes: 2,
        dislikes: 1
      }, {
        id: '10',
        title: 'Gone Girl',
        category: 'Thriller',
        likes: 22,
        dislikes: 12
      }
      ]
    }
  }
  removeMovie(id) {
    this.setState({ movies: this.state.movies.filter(movie => movie.id !== id)});
  }
  render () {
    let MovieLists = this.state.movies.map(movie => {
      return (
        <Col md="4">
          <MovieList key={movie.id} removeMovie={this.removeMovie.bind(this)} movie={movie} />
        </Col>

      )
    })
    return (
      <Container fluid>
        <Row>
          {MovieLists}
        </Row>
      </Container>
    )
  }
}

export default Main;

请尝试帮助我增加喜欢和减少不喜欢的人数（现有喜欢和不喜欢的人数）

Answer 1

当值可以在同一字段上更改为>0 0r 0时，我很难用Javascript执行计算。 因此，您必须仔细设置正确的条件，以准备和照顾这些情况。

incrementMe = () => {
    var newCount = this.state.coun
    function like () {
        if (newCount !== 0) {
          return newCount+=1
        }
        else {
          return 1
        }
    }
    this.setState({
      count: like()
   })
}

不喜欢时，您可以执行以下操作。

decrementMe = () => {
   var newCount = this.state.count
   function dislike () {
     if (newCount !== 0) {
       return newCount-=1
     }
     else {
      return -1
    }
  }
   this.setState({
     count: dislike()
   })
}

Answer 2

我认为这可能会帮助您看到与前面提到的@ Bharat23稍有不同的代码结构，因此，我创建了一个Sandbox以便您了解在本地状态下是否具有喜欢/不喜欢的功能。 在真实的应用程序中，您将验证用户之前没有投票，并从您更新的外部来源获取电影数据，因此这非常简单，但我希望它能以某种方式有所帮助。

https://codesandbox.io/s/wizardly-glitter-3ievf?fontsize=14

Answer 3

我建议您只将likes和dislikes likes增量计数写入父组件，然后将这些函数传递给子组件。

<MovieList key={movie.id} removeMovie={this.removeMovie.bind(this)} movie={movie} likeMe={this.likeMe.bind(this)} dislikeMe={this.dislikeMe.bind(this)}/>

功能应该是

likeMe = (id) => {
    var index = this.state.movies.findIndex(movie => movie.id === id);
    if (index === -1) {
        // handle error
    } else {
        this.setState({
            movies: [
                ...this.state.movies.slice(0, index),
                Object.assign({}, this.state.movies[index], { likes: this.state.movies[index].likes + 1 }),
                ...this.state.movies.slice(index + 1)
            ]
        });
    }
}
dislikeMe = (id) => {
    var index = this.state.movies.findIndex(movie => movie.id === id);
    if (index === -1) {
        // handle error
    } else {
        this.setState({
            movies: [
                ...this.state.movies.slice(0, index),
                Object.assign({}, this.state.movies[index], { dislikes: this.state.movies[index].dislikes + 1 }),
                ...this.state.movies.slice(index + 1)
            ]
        });
    }
}

在子组件中，

<Button onClick={()=>this.props.likeMe(id)}>👍 : {likes}</Button> &nbsp;
<Button onClick={()=>this.props.dislikeMe(id)}>👎 : {dislikes}</Button>

演示版

---

注意： 按下dislike按钮时，通常会增加dislike次数而不是减少次数。 我也做了同样的事情，我增加了不喜欢按钮按下的次数，例如{ dislikes: this.state.movies[index].dislikes + 1 } 。 如果您仍然使用反模式并希望减少计数，请执行{ dislikes: this.state.movies[index].dislikes - 1 } ，在这种情况下，您需要处理负数。