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>&nbsp;&nbsp;
                            <span>{item.mess}</span>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <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 完成