前言

之前学了react基本语法和jsx/组件化，这里还是用ts学习时候的本地留言板案例来实践一下之前的学习语法；

正文

注意点

引入react、react-dom、babel，development是开发版；
使用jsx语法时候 script：type="text/babel";
使用cdn引入时设置 crossorigin 设置用户凭证；
使用jsx循环创建dom的时候，需要设置key；
向事件处理程序传递参数：删除方法<button onClick={(e) => this.deletData(i.id, e)}>删除</button></li>,e为 React 的事件对象；
如果不想有根节点：使用<React.Fragment> </React.Fragment>或<> </> 包裹；

代码-demo6.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用react完成简单留言板案例</title></head><body><div id="app"></div><script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><script type="text/babel">class Text extends React.Component {constructor(props) {super(props);}// 删除deletData = (id) => {let index = this.props.textBox.findIndex(e => {return e[this.props.contId] == id})this.props.textBox.splice(index,1)this.props.saveData(this.props.textBox)}render() {return (<ul id="textBox">{this.props.textBox.map(i => {return <li key={i.id}>{i.data} <button onClick={(e) => this.deletData(i.id, e)}>删除</button></li>})}</ul>)}}class App extends React.Component {constructor(props) {super(props)this.state = {textarea: '',jsonKey: 'react-demo6',contId: 'id',textBox: [],}}componentDidMount() {this.readData()}// 取值readData = (props) => {let localJson = localStorage.getItem(this.state.jsonKey)if (localJson !== null && localJson.length > 0) {this.setState({ textBox: JSON.parse(localJson) })}else{const json = [{id: 1,data: '文章很好!'},{id: 2,data: '哈哈哈哈哈'},]let jsonData = JSON.stringify(json)localStorage.setItem('react-demo6', jsonData)}}// 存值saveData = (arrData) => {let localJson = JSON.stringify(arrData)localStorage.setItem(this.state.jsonKey, localJson)this.setState({ textBox: JSON.parse(localJson) })}// 新增addData = (data) => {let arr = this.state.textBoxlet newObj = {"data": this.state.textarea}// 3.自动生成主键idlet newId = arr.length > 0 ? arr[arr.length - 1][this.state.contId] + 1 : 1newObj[this.state.contId] = newId// 4.将对象增加到数组中arr.push(newObj)// 5.保存新的数组this.saveData(arr)this.setState({ textarea: '' })}handleChange = (event) =>{this.setState({textarea: event.target.value});}render() {return (<React.Fragment><h3>内容</h3><p>使用react完成留言板案例</p><p>作者：jcat_李小黑 ，文章链接 <a href="https://blog.csdn.net/weixin_43216105?t=1">jcat_李小黑的csdn</a></p><h3>评论</h3><Text saveData={this.saveData} textBox={this.state.textBox} contId={this.state.contId} /><hr /><h3>发表评论</h3><textarea value={this.state.textarea} onChange={this.handleChange}  name="textarea" cols="30" rows="10"></textarea><button  onClick={this.addData}>发表评论</button></React.Fragment>)}}ReactDOM.render(<App />,document.getElementById('app'))</script>
</body></html>

结语

以上就是使用react完成简单留言板案例

附：react相关博文

React（03）：React中的JSX语法
React（04）：React中的组件化

其他博文请移步React专栏

如果本文对你有帮助的话，请不要忘记给我点赞评论打call哦~o(￣▽￣)ｄo
有问题留言 over~

React（05）：使用react完成简单留言板案例相关推荐

php留言簿代码,php自治简单留言板代码
php自治简单留言板代码 $lianjie = mysql_connect("localhost","root","xiaolie") or ...
【CyberSecurityLearning 附】使用PHP语言搭建简单的论坛:注册功能实现+PHP个人中心设计+简单留言板
使用PHP语言搭建简单的论坛简单留言板留言个人中心登录验证码注册头像 ...
vue实现留言板的功能_基于vue和bootstrap实现简单留言板功能
本文实例为大家分享了vue实现简单留言板功能的具体代码,供大家参考,具体内容如下作为一个刚开始接触vue的前端小白,我想在这里记录一些学习过程,希望和大家一起进步,如有不妥处之处,请多多指教呦. 今 ...
HTML5实现简单留言板1
简单留言板之前端最近参加培训,HTML学习也有一段时间了:感觉时间过得很快,,. 前端的开发还是有利器的–HBuilder 首先看下自动生成的模块: <!DOCTYPE html> &l ...
微信小程序简单留言板
微信小程序入简单留言板首先在home.wxml页面完成简单的布局 <input type="text" class="inp" placeholder= ...
php简易留言板功能,PHP实现简单留言板功能的方法
这篇文章主要为大家详细介绍了PHP简单留言板功能的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下具体内容如下: index.php error_reporting(0); //关闭NOT ...
基于javaweb+mysql的简单留言板
基于javaweb+mysql的简单留言板运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse/idea/myeclipse/sts等均可配置运行适用课程设计, ...
PHP留言并展示_利用PHP实现简单留言板
跟随bilibili教学视频一步一步实现简单的PHP留言板. 第一个代码文件item.php,创建了一个Message,并连接了数据库. class Message { var $name; var ...
php mysql 简单留言板_php+mysql 最简单的留言板_PHP教程
php+mysql 最简单的留言板学完了记得动手操作. id name email content ; $result = mysql_query(SELECT * FROM message); w ...

React（05）：使用react完成简单留言板案例

前言

正文

注意点

代码-demo6.html

结语

React（05）：使用react完成简单留言板案例相关推荐

最新文章

热门文章