doctype html html head script src static js react js script script src

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
<!doctype html>
<html>
<head>
<script src="static/js/react.js"></script>
<script src="static/js/jsx.js"></script>
<script src="static/js/jquery.js"></script>
<style>
.wrapper {
width: 900px;
height: 500px;
border: 1px solid #000;
margin: 0 auto;
}
.title-input {
width: 600px;
padding: 3px;
height: 20px;
margin: 5px;
}
.title-submit {
float: right;
margin: 5px;
height: 30px;
width: 270px;
}
</style>
</head>
<body>
<div id="main">
</div>
<script type="text/jsx">
/** @jsx React.DOM */
var TodoApp = React.createClass({
render: function() {
return (
<div className="wrapper">
<ControlBox add_url="/api/task/add" parentel={this} />
<Record ref="recordlist" url="/api/tasks/" />
</div>
)
}
});
var Record = React.createClass({
getInitialState: function() {
return {records: []};
},
componentDidMount: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({records: data.tasks});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render: function() {
var createRecord = function(record) {
return (<li>{record}</li>);
};
return (
<ul>{this.state.records.map(createRecord)}</ul>
);
}
});
var ControlBox = React.createClass({
getInitialState: function() {
return {value: ""};
},
clickHandler: function(e) {
var self = this;
$.ajax({
url: this.props.add_url,
dataType: 'json',
data: {value: this.state.value},
method: 'POST',
}).success(function(data) {
self.props.parentel.refs.recordlist.setState({records: data.tasks});
});
},
onChange: function(e) {
this.setState({value: e.target.value});
},
render: function() {
return (
<div className="control-wrapper">
<input onChange={this.onChange} value={this.state.value} className="title-input" type="text" name="title" />
<button onClick={this.clickHandler} className="title-submit">Create New</button>
</div>
)
}
});
React.renderComponent(
<TodoApp />,
document.getElementById('main')
);
</script>
</body>
</html>