留言板實現增刪改(無樣式)
這個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 完成