Browse Source

fake posting comments

(no display yet, coming.)
Lucas Stadler 11 years ago
parent
commit
17af38348e
1 changed files with 28 additions and 4 deletions
  1. 28 4
      js/react/entry.js

+ 28 - 4
js/react/entry.js

6
require('./style.css');
6
require('./style.css');
7
7
8
class CommentForm extends React.Component {
8
class CommentForm extends React.Component {
9
	constructor() {
10
		this.handleSubmit = this.handleSubmit.bind(this);
11
	}
12
13
	handleSubmit(ev) {
14
		ev.preventDefault();
15
		let author = this.refs.author.getDOMNode().value.trim();
16
		let text = this.refs.text.getDOMNode().value.trim();
17
		if (!text || !author) {
18
			return;
19
		}
20
21
		this.props.onCommentSubmit({author, text});
22
		this.refs.author.getDOMNode().value = '';
23
		this.refs.text.getDOMNode().value = '';
24
	}
25
9
	render() {
26
	render() {
10
		return (
27
		return (
11
			<div className="comment-form">
12
				I might be an actual form someday...
13
			</div>
28
			<form className="comment-form" onSubmit={this.handleSubmit}>
29
				<input type="text" placeholder="Your name" ref="author" />
30
				<input type="text" placeholder="Say something..." ref="text" />
31
				<input type="submit" value="Say it!" />
32
			</form>
14
		);
33
		);
15
	}
34
	}
16
}
35
}
39
		this.state = {data: []}
58
		this.state = {data: []}
40
	}
59
	}
41
60
61
	handleCommentSubmit(comment) {
62
		// TODO: Send to server and rerender
63
		console.log("Got a comment: ", comment);
64
	}
65
42
	componentDidMount() {
66
	componentDidMount() {
43
		let xhr = new XMLHttpRequest();
67
		let xhr = new XMLHttpRequest();
44
		xhr.open('GET', this.props.url);
68
		xhr.open('GET', this.props.url);
58
			<div className="comment-box">
82
			<div className="comment-box">
59
				<h1>Comments</h1>
83
				<h1>Comments</h1>
60
				<CommentList data={this.state.data} />
84
				<CommentList data={this.state.data} />
61
				<CommentForm />
85
				<CommentForm onCommentSubmit={this.handleCommentSubmit} />
62
			</div>
86
			</div>
63
		);
87
		);
64
	}
88
	}