react实现任务添加功能效果图如下：
首先我们如1课创建一个文件夹在文件夹中安装react环境需要的配置文件
npm init -y
npm i babel-standalone -D
npm i react react-dom -D
安装配置文件教程链接：https://blog.csdn.net/qq_41614928/article/details/93771657
安装完成后我们开始编写下面代码
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>qq聊天框</title>
<style>
* {margin: 0; padding: 0;}
#app {
width: 500px;
border: 1px solid #000;
text-align: center;
}
h2 {
background-color: #dee1e6;
cursor: pointer;
}
ul li {
background-color: #f1f2f3;
margin-bottom: 1px;
padding: 10px 10px;
text-align: left;
}
</style>
</head>
<body>
<!-- 所有的页面代码都是放在这里面 -->
<div id="app"></div>
<!-- 用于解析jsx的代码 babel引用应在前面 -->
<script src="./node_modules/babel-standalone/babel.js"></script>
<!-- 引用react模块，用于构建用户界面的 JavaScript 库 UI库 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<!-- 操作VM DOM 加载顺序必须先引入react再引入react-dom-->
<script src='./node_modules/react-dom/umd/react-dom.development.js'></script>
<!-- 引入script类型为babel样式 这样可以解析里面的jsx代码 -->
<script type='text/babel'>
class App extends React.Component{
constructor(){
super();
this.state = {
list:[
{
title:'vue',
chacked:true
},
{
title:'augular',
chacked:false
},
{
title:'javaScript',
chacked:true
},
{
title:'typeScript',
chacked:false
}
]
}
}
//添加事件
addData=(e)=>{
if(this.refs.title.value && e.keyCode===13 ){
let list = this.state.list;
let value = this.refs.title.value;
list.unshift({
title:value,
chacked:false
});
//将更改后的数据渲染到页面上
this.setState({
list:list
})
this.refs.title.value = '';
}
};
//勾选事件
checkboxChange=(index)=>{
let list = this.state.list;
list[index].chacked = !list[index].chacked
//将更改后的数据渲染到页面上
this.setState({
list:list
})
};
//删除事件
removeData=(index)=>{
let list = this.state.list;
list.splice(index,1)
//将更改后的数据渲染到页面上 es6写法两边相同直接List
this.setState({
list
})
}
render(){
return(
<div>
请输入你需要添加的课程：
<input type='text' ref='title' onKeyUp={this.addData} />
<h2>你还没学习的课程</h2>
<ul>{
this.state.list.map((item, index)=>{
if(!item.chacked){
return(
<li key={index}>
<input type='checkbox' defaultChecked={item.chacked} onClick={this.checkboxChange.bind(this,index)} />
{item.title}----
<button onClick={this.removeData.bind(this,index)}>删除</button>
</li>
)
}
})
}</ul>
<h2>你学习过的课程</h2>
<ul>{
this.state.list.map((item, index)=>{
if(item.chacked){
return(
<li key={index}>
<input type='checkbox' defaultChecked={item.chacked} onClick={this.checkboxChange.bind(this,index)} />
{item.title}----
<button onClick={this.removeData.bind(this,index)}>删除</button>
</li>
)
}
})
}</ul>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
)
</script>
</body>
</html>