留言板实现增删改(无样式)
这个ReactJs的简易留言板,结构简单,使用的是create-react-app脚手架程序。
主要演示了以下知识点:
1、组件,事件;
2、单向数据流;
3、列表和条件渲染;
4、受控元素;
5、.map()方法。
很适合ReactJs初学者掌握react基本原理,几下就能做出效果,很有成就感。
效果
无内容时显示暂无留言,如下图:
有留言内容时 出现清空按钮,并可以对所展示的留言进行删除和修改,简易留言板修改的内容是写死的,如下图:
修改后 “你好” 修改为 “Hello”,如下图:
相关知识点
事件
事件绑定
<JSX元素 onClick={
this.实例方法|函数体}
修正this
this.方法=()=>{
箭头函数定义方法}
事件对象
实例方法(ev) ev 代理事件对象 ev.target 返回虚拟Vdom
组件状态
定义
//es6+
//实例属性: state
class App{
state:value}
使用
//获取
this.state.proname
//修改
this.setState(对象) //浅合并state
this.setState((prevState,prevProps)=>{
//一般是用于在setState之前做一些操作,this.state==prevState==修改之前的state
return {
sname:value
}
})
this.setState({
sname:value
}, () => {
//一般是用于在setState之后做一些操作 this.state==修改之后的state
})
setState是异步的
列表渲染
this.props|state.属性名.map(function(val,index){
return html
})
条件渲染
//表达式渲染
this.state|props.proname ? jsx1 : jsx2
this.state|props.proname && jsx
refs