代码实现情况:将input中输入的内容通过键盘上的回车键,点击添加到所指定的框架中,并实现所添加内容的单选、多选及清除所选内容等效果。注意:应该是没有使用表单的!!!
先看效果图:
接下来直接上代码:
App.jsx代码
import React, { Component } from "react";
import appModule from "./assets/css/App.module.css";
class App extends Component {
constructor(props) {
super(props);
this.state = {
value: "",
infoList: [],
checkedList: [],
};
// this指向问题
this.headlerChange = this.headlerChange.bind(this);
this.addInfo = this.addInfo.bind(this);
}
// 获取input框中内容
headlerChange(val) {
this.setState({ value: val.target.value });
// let inpInfo = val.target.value;
}
// 点击回车键显示添加input内容
addInfo(val) {
if (val.keyCode === 13 && this.state.value.length > 0) {
this.setState({
infoList: [
...this.state.infoList,
{ value: this.state.value, id: Symbol(0) },
],
value: "",
});
}
}
// 获取添加内容的id
checkboxList = (id, val) => {
console.log(id, val.target.checked);
// 如果点击选中按钮,并且数组中没有这个按钮的id值
if (val.target.checked && !this.state.checkedList.includes(id)) {
// 那就把这个id存放到数组中
this.setState({
checkedList: [...this.state.checkedList, id],
});
}
// 如果没有点击按钮,但是这个id已存在在数组中
else if (!val.target.checked && this.state.checkedList.includes(id)) {
//那么就把这个id值从数组中过滤掉
this.setState({
checkedList: [...this.state.checkedList].filter(cid => cid !== id),
});
}
};
// 获取删除按钮绑定的id值
delList = id => {
this.setState({
infoList: [...this.state.infoList].filter(cid => cid.id !== id),
checkedList: [...this.state.checkedList].filter(cid => cid.id !== id),
});
};
// 全选按钮
checkedAll = val => {
// 点击按钮 获取添加所有内容的id
if (val.target.checked) {
this.setState({
checkedList: this.state.infoList.map(item => item.id),
});
}
// 清除所有id 即给数组赋空值
else {
this.setState({
checkedList: [],
});
}
};
// 清除勾选的行的选项
cleanList = () => {
this.setState({
checkedList: [],
});
};
render() {
// 解构
let { value, infoList, checkedList } = this.state;
return (
<>
<div>
<div className={appModule.box}>
<input
type="text"
className={appModule.inp}
placeholder="输入你的任务名称,按回车键确认"
value={value}
onChange={this.headlerChange}
onKeyUp={this.addInfo}
/>
<div className={appModule.innerbox}>
<ul className={appModule.addUl}>
{/* 将input框中输入的内容循环渲染到页面中 */}
{infoList.map((item, index) => {
return (
<li className={appModule.addLi} key={index}>
{/* 单击选中 */}
<input
type="checkbox"
className={appModule.addInp}
checked={checkedList.includes(item.id)}
onChange={this.checkboxList.bind(this, item.id)}
/>
{/* 从输入框中遍历获得添加的内容 */}
<span className={appModule.addSpan}>{item.value}</span>
{/* 点击按钮删除id所在的行 */}
<button
className={appModule.delbtn}
onClick={this.delList.bind(this, item.id)}>
删除
</button>
</li>
);
})}
</ul>
</div>
<div className={appModule.delAllBox}>
<input
type="checkbox"
className={appModule.delAllInp}
checked={
checkedList.length === infoList.length &&
checkedList.length !== 0
}
onChange={this.checkedAll}
/>
<div className={appModule.finshSpan}>
已完成{checkedList.length}/全部{infoList.length}
</div>
<button className={appModule.delAllbtn} onClick={this.cleanList}>
清除已完成任务
</button>
</div>
</div>
</div>
</>
);
}
}
export default App;
css样式代码:
.box {
border: 1px solid rgb(236, 240, 207);
width: 450px;
padding: 10px;
margin: auto;
border-radius: 5px;
}
.inp {
width: 400px;
height: 30px;
padding: 5px;
margin-left: 15px;
border-radius: 10px;
border: 1px solid #ccc;
color: #ccc;
padding-left: 30px;
font-size: 14px;
box-sizing: border-box;
}
.inp:hover {
box-shadow: 0px 0px 10px cyan;
color: #333;
}
.innerbox {
width: 400px;
margin: 20px 0 0 15px;
}
.addUl {
list-style: none;
}
.addLi {
width: 350px;
margin: 10px 0;
position: relative;
left: -30px;
}
.addLi:hover {
background-color: #ccc;
width: 350px;
}
.addInp {
margin-right: 5px;
}
.addSpan {
color: #333;
}
.delbtn {
background-color: rgb(255, 0, 0);
border: 0.5px solid #ccc;
border-radius: 5px;
color: #fff;
box-shadow: #ccc 0 0 10px;
font-size: 12px;
padding: 3px 5px;
float: right;
position: relative;
left: 30px;
top: -2px;
}
.delAllBox {
width: 400px;
height: 30px;
margin: 20px 0 0 15px;
display: flex;
justify-items: center;
}
.finshSpan {
margin: 5px 10px 0 10px;
color: #333;
font-size: 14px;
}
.delAllbtn {
background-color: rgb(255, 0, 0);
border: 0.5px solid #ccc;
border-radius: 5px;
color: #fff;
height: 30px;
box-shadow: #ccc 0 0 10px;
font-size: 12px;
padding: 3px 5px;
float: right;
position: relative;
left: 43%;
}