React及受控组件实现简单的联接

代码实现情况：将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%;
}