浅谈React实现评论框（三）

叁歲伎倆 2022-06-17 10:51 251阅读 0赞

[http://blog.csdn.net/zhouziyu2011/article/details/70504651][http_blog.csdn.net_zhouziyu2011_article_details_70504651]实现了不考虑服务器，直接将 JSON 数据写在代码中的模拟从服务器获取数据。

本文继续进行两方面的改进：

1、给组件引进可变的 state

2、从JSON文件从获取数据

1、给组件引进可变的 state

之前的代码中每个组件都是基于自己的props渲染自己，但props 是不可变的，它们从父级传来并被父级拥有。

为实现交互，给组件引进了可变的 state，this.state是组件私有的，可通过调用 this.setState() 改变它，每当state更新，组件就重新渲染自己。

var CommentBox = React.createClass({
    	getInitialState: function() {
    		return {
    			data: [
    				{id: 1, author: "Alice", text: "This is Alice's comment"},
    				{id: 2, author: "Bruce", text: "This is Bruce's comment"}
    			]
    		};
    	},
    	render: function() {
    		return (
    			<div className="commentBox">
    				<h1>CommentBox</h1>
    				<CommentList data={this.state.data} />
    				<CommentForm />
    			</div>
    		);
    	}
    });
    var CommentList = React.createClass({
    	render: function() {
    		var commentNodes = this.props.data.map(function(comment) {
    			return <Comment author={comment.author} key={comment.id}>{comment.text}</Comment>
    		});
    		return (
    			<div className="commentList">
    				{commentNodes}
    			</div>
    		);
    	}
    });
    var Comment = React.createClass({
    	render: function() {
    		return (
    			<div className="comment">
    				<h3>{this.props.author}</h3>
    				{this.props.children}
    			</div>
    		);
    	}
    });
    var CommentForm = React.createClass({
    	render: function() {
    		return (
    			<div className="commentForm">
    				CommentForm
    			</div>
    		);
    	}
    });
    ReactDOM.render(
    	<CommentBox />,
    	document.getElementById('commentBox')
    );

2、从JSON文件从获取数据

当组件第一次创建时，从服务器获取JSON并更新状态以反映最新的数据，用jQuery的ajax()方法来发送一个异步请求到服务器以获取需要的数据，这些数据暂时从commentBox.json中获取：

commentBox.json文件：

[
    	{"id": 1, "author": "Cindy", "text": "This is Cindy's comment"},
    	{"id": 2, "author": "David", "text": "This is David's comment"}
    ]

注意：JSON格式的文件的键值对的属性和值都要用双引号括起来。

var CommentBox = React.createClass({
    	getInitialState: function() {
    		return {data: []};
    	},
    	componentDidMount: function() {
    		$.ajax({
    			url: this.props.url,
    			dataType: 'json',
    			cache: false,
    			success: function(data) {
    				this.setState({data: data});
    			}.bind(this),
    			error: function(xhr, status, err) {
    				console.error(this.props.url, status, err.toString());
    			}.bind(this)
    		});
    	},
    	render: function() {
    		return (
    			<div className="commentBox">
    				<h1>CommentBox</h1>
    				<CommentList data={this.state.data} />
    				<CommentForm />
    			</div>
    		);
    	}
    });
    var CommentList = React.createClass({
    	render: function() {
    		var commentNodes = this.props.data.map(function(comment) {
    			return <Comment author={comment.author} key={comment.id}>{comment.text}</Comment>
    		});
    		return (
    			<div className="commentList">
    				{commentNodes}
    			</div>
    		);
    	}
    });
    var Comment = React.createClass({
    	render: function() {
    		return (
    			<div className="comment">
    				<h3>{this.props.author}</h3>
    				{this.props.children}
    			</div>
    		);
    	}
    });
    var CommentForm = React.createClass({
    	render: function() {
    		return (
    			<div className="commentForm">
    				CommentForm
    			</div>
    		);
    	}
    });
    ReactDOM.render(
    	<CommentBox url="commentBox.json"/>,
    	document.getElementById('commentBox')
    );

componentDidMount() 是被React自动调用的方法，类似于JavaScript中的window.onload，在render()方法之后，也即组件渲染完毕之后，被React自动调用。

getComments()方法封装从服务器获取数据的Ajax调用。componentDidMount()每隔一定时间调用getComments()方法，实现对服务器的轮询。

var CommentBox = React.createClass({
    	getInitialState: function() {
    		return {data: []};
    	},
    	getComments: function() {
    		$.ajax({
    			url: this.props.url,
    			dataType: 'json',
    			cache: false,
    			success: function(data) {
    				this.setState({data: data});
    			}.bind(this),
    			error: function(xhr, status, err) {
    				console.error(this.props.url, status, err.toString());
    			}.bind(this)
    		});
    	},
    	componentDidMount: function() {
    		this.getComments();
    		setInterval(this.getComments, this.props.inteval);
    	},
    	submitComments: function(comment) {
    		$.ajax({
    			url: this.props.url,
    			dataType: 'json',
    			type: 'POST',
    			data: comment,
    			success: function(data) {
    				this.setState({data: data});
    			}.bind(this),
    			error: function(xhr, status, err) {
    				console.error(this.props.url, status, err.toString());
    			}.bind(this)
    		});
    	},
    	render: function() {
    		return (
    			<div className="commentBox">
    				<h1>CommentBox</h1>
    				<CommentForm onCommentSubmit={this.submitComments}/>
    				<CommentList data={this.state.data} />
    			</div>
    		);
    	}
    });
    var CommentList = React.createClass({
    	render: function() {
    		var commentNodes = this.props.data.map(function(comment) {
    			return <Comment author={comment.author} key={comment.id}>{comment.text}</Comment>
    		});
    		return (
    			<div className="commentList">
    				{commentNodes}
    			</div>
    		);
    	}
    });
    var Comment = React.createClass({
    	render: function() {
    		return (
    			<div className="comment">
    				{this.props.author}：{this.props.children}
    			</div>
    		);
    	}
    });
    var CommentForm = React.createClass({
    	getInitialState: function() {
    		return {author: "", text: ""};
    	},
    	setAuthor: function(e) {
    		this.setState({author: e.target.value});
    	},
    	setText: function(e) {
    		this.setState({text: e.target.value});
    	},
    	submitComments: function(e) {
    		e.preventDefault();
    		var author = this.state.author.trim();
    		var text = this.state.text.trim();
    		if (text == "" || author == "")
    			return;
    		this.props.onCommentSubmit({author: author, text: text});
    		this.setState({author: "", text: ""});
    	},
    	render: function() {
    		return (
    			<form className="commentForm" onSubmit={this.submitComments}>
    				<input type="text" placeholder="Please enter your name!" value={this.state.author} onChange={this.setAuthor} /><br/><br/>
    				<input type="text" placeholder="Please enter your comment!" value={this.state.text} onChange={this.setText} /><br/><br/>
    				<input type="submit" value="submit" />
    			</form>
    		);
    	}
    });
    ReactDOM.render(
    	<CommentBox url="commentBox.json" inteval="5000"/>,
    	document.getElementById('commentBox')
    );

CommentForm 组件渲染一个可以输入作者、评论并提交的表单，state带有 author 和 text 两个属性并初始化为空字符串，给表单的author 文本框字段和text文本框字段绑定一个onChange处理器，在字段更新后更新state的值，并给表单绑定一个onSubmit处理器，在表单提交输入后清空表单字段，并通过调用preventDefault()来阻止提交表单的默认行为。

当用户提交评论时，需要刷新评论列表来包含这条新评论，因此需要从子组件传回数据到它的父组件，在父组件的render()方法中传递一个新的回调函数submitComments到子组件，绑定它到子组件的 onCommentSubmit 事件上。

submitComments通过Ajax请求向服务器POST数据来刷新列表。需要注意的是，由于本实例中是用的是静态的JSON文件模拟服务器数据，因此发GET请求可以成功但POST请求则报错404 Not Found，这个问题在正常的服务器请求中不会出现。

[http_blog.csdn.net_zhouziyu2011_article_details_70504651]: http://blog.csdn.net/zhouziyu2011/article/details/70504651

发表评论取消回复

表情：

评论列表（有 0 条评论，251人围观）

还没有评论，来说两句吧...

相关阅读

相关浅谈React mixins

组件是React复用代码的最佳方式，但有时一些不同的组件间也需要共用一些功能，被称为跨切面关注点，React使用 mixins 来解决这类问题。一个通用的场景是：一个组件

港控/mmm°/ 2022年06月17日 13:44/ 0 赞/ 202 阅读

相关浅谈React实现过滤器

思路： 1、在最顶层组件中创建state； 2、监听底层组件的输入框和多选按钮的onchange事件，借助this.prop通过函数传递输入框和多选按钮的值给上层组件；

喜欢ヅ旅行/ 2022年06月17日 12:17/ 0 赞/ 227 阅读

相关浅谈React实现输入框

组件要实现的功能： 1、定制label和输入框的placeholder的内容； 2、输入的内容不符合正则表达式要求时，输入框标红，符合时标绿； 3、点击清除按钮后，按钮消

浅浅的花香味﹌/ 2022年06月17日 12:06/ 0 赞/ 332 阅读

相关浅谈React实现评论框（三）

[http://blog.csdn.net/zhouziyu2011/article/details/70504651][http_blog.csdn.net_zhouziyu

叁歲伎倆/ 2022年06月17日 10:51/ 0 赞/ 252 阅读

相关浅谈React实现评论框（二）

[http://blog.csdn.net/zhouziyu2011/article/details/70502495][http_blog.csdn.net_zhouziyu

Bertha 。/ 2022年06月17日 09:50/ 0 赞/ 170 阅读

相关浅谈React实现评论框（一）

结构：第一层——CommentBox 第二层——CommentList 第三层——Comment 第二层——CommentForm 1、JSX

心已赠人/ 2022年06月17日 09:49/ 0 赞/ 283 阅读

相关浅谈React.createElement()方法

document有createElement()方法，React也有createElement()方法，下面就来介绍React的createElement()方法。

超、凢脫俗/ 2022年06月17日 09:42/ 0 赞/ 744 阅读

相关浅谈React实现搜索匹配

search.html： <!DOCTYPE html> <html> <head> <link rel="stylesheet" hr

傷城~/ 2022年06月17日 09:18/ 0 赞/ 191 阅读

相关浅谈React实现todolist

todoList.html： <!DOCTYPE html> <html> <head> <link rel="styleshee

爱被打了一巴掌/ 2022年06月17日 09:18/ 0 赞/ 177 阅读

相关浅谈React Hooks

> 由于工作的原因我已经很长时间没接触过React了。前段时间圈子里都在讨论React Hooks，出于好奇也学习了一番，特此整理以加深理解。缘由在web应用无所不

古城微笑少年丶/ 2022年03月06日 05:18/ 0 赞/ 244 阅读