【react.js】onClickを機能させたい

###前提・実現したいこと
React.jsを使ってページングを実現したいと思いっています。
まずテストとしてliをクリックしたらalertを出力させようと思ったのですが
なかなかうまくいきません。

###発生している問題・エラーメッセージ

Uncaught TypeError: this.moveLink is not a function
    at HTMLLIElement.onclick

###該当のソースコード

pageLink: function(num) {
	var pageLinkNum = Math.ceil(+num / 20); // 1ページ20件出力
	var pageLinks = '';
	var $pageLink = $('.pageLink');
	for(var i = 1; i <= pageLinkNum; i++) {
		pageLinks += "<li onClick='this.moveLink()'>" + i + "</li>";
	}
	$pageLink.append(pageLinks);
},
moveLink: function() {
	alert("ok");
},
render: function() {
	var stateData = this.state.data; // 登録しているデータ
	var charaTotalNum = Object.keys(stateData).length; // 登録件数
	return(
		<ul className="pageLink">{this.pageLink(charaTotalNum)}</ul>
	);
}

※一部抜粋

###試したこと
ページ表示時に、renderのthis.pageLinkで、登録件数 / 1ページに表示する件数が動いて、
HTMLのページングの部分は以下のように出力されます。

<ul class="pageLink">
<li onclick="this.moveLink()">1</li>
<li onclick="this.moveLink()">2</li>
<li onclick="this.moveLink()">3</li>
</ul>

で、liをクリックしたらmoveLink()を走らせてalertを出したいのですが、
上記のようなエラーが出力されてしまいます。

ここの挙動を実現させたいので、お力をお貸しください。
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

このような挙動でしょうか？

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6</head>
7<body>
8<div id="box"></div>
9<script src="http://fb.me/react-0.13.3.js"></script>
10<script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
11<script type="text/jsx">
12    var CreateList = React.createClass({
13        pageLink: function (num = 60) {
14            var pageLinkNum = Math.ceil(num / 20);
15            var listBox = [];
16            for (var i = 1; i <= pageLinkNum; i++) {
17                listBox.push(<li key={i} onClick={this.moveLink}>{i}</li>);
18            }
19            return listBox;
20        },
21        moveLink: function () {
22            alert("ok");
23        },
24        render: function () {
25            return (
26                    <ul>
27                        {this.pageLink()}
28                    </ul>
29            )
30        }
31    });
32    React.render(<CreateList/>, document.getElementById("box"));
33</script>
34</body>
35</html>