快来加入我们吧！
"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习，及时获取最新文章。
"Code tailor" ，如果您对我们文章感兴趣、或是想提一些建议，微信关注 “小和山的菜鸟们” 公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！
实战案例(一)：留言功能
我们学到这里，就可以简单的使用 HTML 的代码实现一个简单的留言页面。
简单展示：
创建 HTML 文件然后导入 React 依赖
这样就可以使用 React 了，使用 jsx 编写代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>留言功能 HTML 版</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
// write class here
</script>
</body>
</html>创建名为 App 的 class 类
- 创建
class类
class App extends React.Component {
// class 内部内容
}- 创建构造函数
constructor
constructor() {
super();
this.state = {
message: "你知道有这么一个团队吗？他们怀揣梦想，艰苦奋斗，作为一群大学生菜鸟，放弃了平时娱乐的时间，选择一起学习，一起成长，将平时学习的笔记，心得总结为文章，目的很简单，希望可以帮助向他们一样的菜鸟们？你想了解更多吗？快搜索微信公众号：小和山的菜鸟们，加入他们吧！",
evaluateList:
[
{
imgUrl: "https://xhs-rookies.com/img/rookie-icon.png",
nickName: "菜鸟一号",
sendTime: "2021.05.14",
evaluate: "这是一个即将推出系列文章的团队，我们一起期待他们的作品吧！",
},
],
inputMess: "",
};
}- 编写
render函数
render() {
return (
<div className="root">
<div className="title">Hello React</div>
<p className="content">{this.state.message}</p>
<div className="evaluateBox">
<div className="titleText">大伙的评论</div>
{/* 遍历留言列表 */}
{this.state.evaluateList.map((item) => {
return (
<div className="evaluateItem">
<img className="headImg" src={item.imgUrl} />
<div className="senderProfile">
<div className="nickNameBox">
<div className="nickName">{item.nickName}</div>
<div className="sendTime">{item.sendTime}</div>
</div>
<div className="evaluate">{item.evaluate}</div>
</div>
</div>
);
})}
</div>
{/* 留言输入框 */}
<div className="sendEvaluate">
<img
className="headImg"
src="https://xhs-rookies.com/img/rookie-icon.png"
/>
<div className="inputBox">
<textarea
className="inputText"
placeholder="请输入评论..."
value={this.state.inputMess}
onChange={(e) => this.getEvaluate(e)}
/>
<div className="sendSubmit" onClick={() => this.sendSubmit()}>
发表
</div>
</div>
</div>
</div>
);
}- 其他点击事件函数
// 获取输入内容
getEvaluate(e) {
console.log(e.target.value);
this.setState({
inputMess: e.target.value,
});
}
// 发送留言并清空输入框
sendSubmit() {
let data = [
{
imgUrl: "https://xhs-rookies.com/img/rookie-icon.png",
nickName: "菜鸟一号",
sendTime: "2021.05.14",
evaluate: this.state.inputMess,
},
];
this.setState({
// 将原数据和新数据插入 留言列表
evaluateList: [...data, ...this.state.evaluateList],
inputMess: "",
});
}
}- 加载 app
ReactDOM.render(<App />, document.getElementById('app'))源码地址
下节预告
在这一节我们将之前学习的知识串联起来做了一个实战小Demo，巩固了大家的知识，在下一节中，我们将给大家介绍React的脚手架知识，使用脚手架快速搭建一个React项目！
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。