React初学项目——简易留言板
留言板实现增删改（无样式）
这个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
<jsx ref={
el => this.定义一个实例属性 = el}
this.实例属性 //后期用作访问jsx元素
源码
受控元素留言板
表单的value受控，受数据控制
value={
this.state.数据名} //model->view
onChange={
this.方法} //view->model
处理多个输入元素
可以为每个元素添加一个 name 属性(通常和数据名一致)，处理函数根据 event.target.name 的值来选择要做什么
<input name="inputUserName"
<input name="inputContent"
this.setState({
[ev.target.name]:ev.target.value})
双向绑定
步骤1
基本结构 index.js
import ReactDom from 'react-dom';
import React,{
Component} from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<div>
<p>Hello World</p>
</div>
);
}
}
export default App;
ReactDom.render(<App />,document.getElementById('root'));
步骤2
基本页面布局——写在 return 里的 ↓ ：
<div id="app">
<h3>{
title}</h3>
姓名:<input type='text' value={
user} name='user' onChange={
this.changeIpt}/>
<br/><br/>
留言:<textarea value={
content} name='content' onChange={
this.changeIpt}/>
<br/><br/>
<button onClick={
add} style={
{
backgroundColor:'#666'}}>发表</button>
<ul>
{
list.length===0 && <li> 暂无留言 </li>}
{
list.map((item,index)=>(
<li key={
item.id}>
<i>{
item.name}:</i>
<span>{
item.mess}</span>
<button onClick={
remove.bind(null, index, item.id)} style={
{
backgroundColor: 'red'}}>删除</button>
<button onClick={
() => check(index, item.id, "Hello")} style={
{
backgroundColor: 'green'}}>修改</button>
</li>
))}
</ul>
{
list.length>0 ? <button onClick={
()=>this.clear()}>清空</button> : null }
</div>
步骤3
增删改查的函数、修改和点击的事件和双向绑定的方法
//留言
add=()=> {
this.state.list.push({
id: this.state.list.length + 1,
name: this.state.user,
mess: this.state.content
});
this.setState({
//修改重新赋值并清空input的值
list:this.state.list,
user:'',
content:''
})
}
//删除
remove=(index,id)=>{
this.state.list.splice(index,1);
this.setState({
list:this.state.list
})
}
//修改
check=(index,id,value)=>{
this.state.list[index].mess=value;
this.setState({
list:this.state.list
})
}
//清空
clear=()=>{
this.setState({
list:[]}) //清空所有留言内容
}
//受控双向绑定 处理多个元素的输入
changeIpt=(ev)=>{
this.setState({
[ev.target.name]:ev.target.value
})
}
步骤4
简化代码，需要将this指向解构出来
render(){
//解构
let {
title,user,content,list} =this.state; //相当于this.state.title
let {
add,remove,check}=this; //相当于this.add
}
yarn start 完成