java - 如何对按钮单击使用react以更改 map 中的参数？

Question

我正在使用 playframework 2.3.8，我正在尝试实现某种类似 Stack Overflow 的投票系统。到目前为止，我在 map 上有一些问题/答案，我将其发送到 View 。按钮在那里，但我不知道如何让它们对点击使用react以更改评分(arrowUp 应该对计数器进行投票，arrowDown 类似)。

这是一个示例图片:

这是我的 Controller Application.java:

static Map<Question, List<Answer>> myMap = new HashMap<Question, List<Answer>>();

public static void initialize() {
        // Question format: ID / questionText / voteScore / userID
        // Answer format: ID / questionID (answer linked to question) / answerText / voteScore / userID
        Question question1 = new Question("xyz", "Do Androids dream?", 127, "Marcus");
        Answer answer11 = new Answer("zab", "xyz", "Only of electric sheep!", 70, "Tibor");
        Answer answer12 = new Answer("qwert", "xyz", "No, they dont!", 10, "Sarah");

        List<Answer> answerList1 = new ArrayList<Answer>();
        answerList1.add(answer11);
        answerList1.add(answer12);

        myMap.clear();
        myMap.put(question1, answerList1);
}

    public static Result index() {
        initialize();
        return ok(views.html.index.render(myMap));
    }

这是我的 View 类 (index.scala.html):

@import model.Question
@import model.Answer

@(myMap: Map[Question, List[Answer]])

@main("Main") {
@for((question, value) <- myMap){
(some HTML to make it look nice)
<button type="button" class="btn btn-default"  onclick="voteUp()" id="upvoteButton" 
   value="voteUp" style="width: 30px; height: 30px; text-align: center; vertical-align: center;">
            <span class="glyphicon glyphicon-arrow-up" aria-hidden="true" style="color:orange"></span>
</button>
@question.voteScore
(some HTML to make it look even nicer)
}

我的routes.conf:

GET     /                           controllers.Application.index()
GET     /                           controllers.Application.upVote()
GET     /Forum                      controllers.Forum.askQuestion()
GET     /Einstellungen              controllers.Application.showSettings()
GET     /Quiz                       controllers.Application.startQuiz()

我不知道是否可以通过 Controller 类在路由上使用按钮，因为大多数其他项目似乎都使用 Javascript。那么如何捕获按钮点击并更新 voteScore 呢？

[EDIT1]:我现在添加了一个脚本，仅增加第一个问题的 voteScore。

<script language="javascript"> 
    function voteUp() {
        var num = $('#num');
        var currentNumber = num.text().length ? parseInt(num.text()) : 0;
        num.text(currentNumber + 1);
    }
</script>

在我的index.scala.html中，我向@question.voteScore添加了一个span标签:

<span id="num"> @question.voteScore </span>

但是当我迭代 map 时，我只能更改第一个问题的值。第一个赞成按钮有效，而所有其他按钮也会增加第一个问题的投票分数!

那么如何从 map 中获取每个相应问题的相应值，更改它并将其放回 map 中？

Answer 1

首先您需要做的是捕获该按钮上的点击事件。使用 jquery，使用类或 id 将事件监听器添加到特定按钮。

第二您需要在事件监听器内进行 AJAX 调用，这将调用 API，并且 onSuccess 使用 jquery 函数在 UI 中进行增量，以防出现错误，显示从 API 收到的错误消息。

第三 在Play中创建一个API，无论你想要什么，这个API都会在AJAX中从UI调用。您需要创建不同的 API 来对问题和答案进行投票。在这两个 API 中，都将 id 作为参数并递增 DB 中的值，然后返回递增的值。如果有任何错误或参数错误，请发送状态码 > 300 的错误消息。