要熟悉组件间的关系，可以通过制作todolist来做到，在此之前我已经使用Vue完成过了
vue学习笔记—搭建简单的todolist
接下来要使用React来完成
首先，我直接使用create-react-app来搭建一个简单的项目
目录如下
将src中除了App.js，index.js，serviceWorker.js之外的文件删除，目录改为如图
component下存放组件，assets下存放静态文件，这里为了方便我只用一个css文件
重新编辑index.js和App.js如下
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
// App.js
import React from 'react';
import ReactDOM from 'react-dom';
import Header from './component/todo/header';
import Add from './component/todo/add';
import List from './component/todo/list';
class App extends React.Component{
render(){
return(
<div>
<Header />
<Add />
<List />
</div>
)
}
}
export default App;
先简单地写一下三个组件的内容
// header.js
import React from 'react';
class Header extends React.Component{
render(){
return(
<div className="header">
<h1 className="title">todolist</h1>
</div>
)}
}
export default Header;
// add.js
import React from 'react';
class Add extends React.Component{
render(){
return(
<div className="addContent">
<p>here is add</p>
</div>
)}
}
export default Add;
import React from 'react';
class List extends React.Component{
render(){
return(
<div className="contentList">
<p>here is list</p>
</div>
)}
}
export default List;
出现这个页面说明到这一步没错，接下来我们开始正式写todolist
首先在父组件App.js中写好增删方法和todolist的内容
import React from 'react';
import Header from './component/todo/header';
import Add from './component/todo/add';
import List from './component/todo/list';
import './assets/style/whole.css'
class App extends React.Component{
constructor(props){
super(props);
this.state={
// todolist的具体内容
contentList:[{
id:0,
title:'todo 1',
completed:false
},{
id:1,
title:'todo 2',
completed:false
}],
// 计数，每次增加一个新内容时赋值给id然后加1
count:2
}
// 为各个方法绑定this
this.handleAdd=this.handleAdd.bind(this);
this.handleDelete=this.handleDelete.bind(this);
this.handleComplete=this.handleComplete.bind(this);
}
// 添加内容
handleAdd(content){
content.id=this.state.count++;
let list=this.state.contentList;
list.push(content);
this.setState({
contentList:list
})
}
// 删除内容
handleDelete(id){
let list=this.state.contentList;
for(let i=0;i<list.length;i++){
if(list[i].id===id){
list.splice(i,1);
}
}
this.setState(()=>{
return {
contentList:list
}
})
}
// 内容完成
handleComplete(id){
let list=this.state.contentList;
for(let i=0;i<list.length;i++){
if(list[i].id==id){
list[i].completed=!list[i].completed
}
}
this.setState({
contentList:list
})
}
render(){
return(
<div>
<Header />
<Add onAddClick={this.handleAdd}/>
<List
contentList={this.state.contentList}
onDeleteClick={this.handleDelete}
onCompletedChange={this.handleComplete}/>
</div>
)
}
}
export default App;
因为React的数据流是从上往下的，所以我们将todolist的数据和修改（增加和删除）的方法放在父组件中，修改后再传给子组件，在子组件中触发父组件的方法
各个子组件代码如下
// header.js
import React from 'react';
class Header extends React.Component{
render(){
return(
<div className="header">
<h1 className="title">todolist</h1>
</div>
)}
}
export default Header;
// add.js
import React from 'react';
import '../../assets/style/whole.css'
class Add extends React.Component{
constructor(props){
super(props);
this.state={
// 输入框的内容
title:''
}
// 为各个方法绑定this
this.handleChange=this.handleChange.bind(this);
this.addContent=this.addContent.bind(this);
}
// 将输入的内容绑定在state的title上
handleChange(e){
this.setState({
title:e.target.value
})
}
// 添加内容
addContent(){
if(this.state.title!==''){
let content={
title:this.state.title,
completed:false
}
// 调用父组件的方法
this.props.onAddClick(content)
// 重置输入框内容
this.setState({
title:''
})
}
}
render(){
return(
<div className="addContent">
<input placeholder="请输入要添加的标题" value={this.state.title} onChange={this.handleChange}/>
<button onClick={this.addContent}>add</button>
</div>
)}
}
export default Add;
// list.js
import React from 'react';
import '../../assets/style/whole.css'
class List extends React.Component{
constructor(props){
super(props);
this.deleteHandle=this.deleteHandle.bind(this);
}
deleteHandle(id){
// 调用父组件的方法
this.props.onDeleteClick(id);
}
render(){
// 按列表标题的数量来渲染内容
const element = this.props.contentList.map((c)=>{
return(
<li className="detailContent" key={c.id}>
<input type="checkbox" onChange={this.props.onCompletedChange.bind(this,c.id)}/>
<span className={c.completed?'haveCompleted':'notCompleted'}>{c.title}</span>
<button onClick={this.deleteHandle.bind(this,c.id)}>删除</button>
</li>
)
})
return(
<div className="contentList">
<ul>
{element}
</ul>
</div>
)}
}
export default List;
最后加一点css
ul {
padding: 0px;
margin: 0px;
list-style: none;
}
button {
cursor: pointer;
}
.detailContent .haveCompleted {
text-decoration: line-through;
color: #f00;
}
.detailContent {
text-align: left;
padding: 20px;
margin: 2px;
font-size: 20px;
color: #fff;
background-color: #333;
}
.detailContent span {
margin: 0 30px;
}
.addContent {
padding: 10px;
width: 400px;
border: 1px #333 solid;
}
.addContent input {
width: 320px;
margin-right: 10px;
border: none;
outline: none;
font-size: 24px;
}
.addContent button {
border: 1px solid #333;
font-size: 28px;
color: #fff;
background-color: #333;
}
大功告成，虽然有点丑，但是完成了基本的内容
