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 完成