最新Kbone基础——React + Kbone 实现 Todos App_kbone+react(1)

padding-top: 10rem;
}

.header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 50px;
color: yellowgreen;
}

.logo {
animation: App-logo-spin infinite 20s linear;
height: 2vmin;
pointer-events: none;
}

.todo-list {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
}

.todo {
display: flex;
align-items: center;
margin: 1rem 0;
}

.todo-is-completed .checkbox {
color: #000;
background: #fff;
}

.todo-is-completed input {
text-decoration: line-through;
}

.checkbox {
width: 18px;
height: 18px;
border-radius: 50%;
margin-right: 10px;
cursor: pointer;
font-size: 10px;
display: flex;
justify-content: center;
align-items: center;
transition: background-color .2s ease-in-out;
border: 1px solid #fff;
}

.checkbox:hover {
background: rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0);
}

.checkbox-checked {
color: #000;
background: #fff;
}

ul {
list-style: none;
padding: 0;
line-height: 2rem;
}

input {
border: none;
background: transparent;
color: white;
font-size: 1.4rem;
outline: none;
width: 100%;
}

#### 2.3 编写 Todos.js 组件


在项目目录 `react-todos/src` 下创建 `Todos.js`：

import React, { useState } from ‘react’
import ‘./Todos.css’

function Todos() {
const [todos, setTodos] = useState([
{
content: ‘干洗衣服’,
isCompleted: true,
},
{
content: ‘理发’,
isCompleted: false,
},
{
content: ‘学习Kbone’,
isCompleted: false,
}
])

function handleKeyDown(e, i) {
if (e.key === ‘Enter’) {
createTodoAtIndex(e, i)
}
if (e.key === ‘Backspace’ && todos[i].content === ‘’) {
e.preventDefault();
return removeTodoAtIndex(i)
}
}

function createTodoAtIndex(e, i) {
const newTodos = […todos];
newTodos.splice(i + 1, 0, {
content: ‘’,
isCompleted: false,
})
setTodos(newTodos);
setTimeout(() => {
document.forms[0].elements[i + 1].focus();
}, 0)
}

function updateTodoAtIndex(e, i) {
const newTodos = […todos]
newTodos[i].content = e.target.value
setTodos(newTodos)
}

function removeTodoAtIndex(i) {
if (i === 0 && todos.length === 1) return
setTodos(todos => todos.slice(0, i).concat(todos.slice(i + 1, todos.length)))
setTimeout(() => {
document.forms[0].elements[i - 1].focus()
}, 0)
}

function toggleTodoCompleteAtIndex(index) {
const temporaryTodos = […todos]
temporaryTodos[index].isCompleted = !temporaryTodos[index].isCompleted
setTodos(temporaryTodos)
}

return (

React Todos

• 
  {todos.map((todo, i) => (
  <div key={todo+i} className={ todo ${todo.isCompleted && 'todo-is-completed'}}>
  <div className={‘checkbox’} onClick={() => toggleTodoCompleteAtIndex(i)}>
  {todo.isCompleted && (
  ✔
  )}
  

<input
type=“text”
value={todo.content}
onKeyDown={e => handleKeyDown(e, i)}
onChange={e => updateTodoAtIndex(e, i)}
/>

))}



)
}

export default Todos

#### 2.4 项目预览效果


在控制台执行 `npm start` 命令，浏览器效果如下：


![](https://img-blog.csdnimg.cn/94f33e6d17a44f7a8f3057bb5083f3f1.png)


 


#### 3、将 React 项目编入Kbone


#### 3.1 搭建Kbone的React环境

kbone init kbone-react
模板选择 react

cd kbone-react
npm run web
npm run mp

效果如下图：


![](https://img-blog.csdnimg.cn/ed8da0c6b02e4ce48698bce4b2dff033.png)


 


![](https://img-blog.csdnimg.cn/8cab8854726648f088bc021f7ec9369c.png)


#### 3.2 修改 index.js


修改 `kbone-react/src/index.js`：

// …
// import Counter from ‘./components/counter’
import Todos from ‘./components/todos/Todos’

export default function createApp() {
// …

ReactDOM.render(, container)
}

// …

#### 3.3 创建 Todos.js 组件


在 kbone-react/src/components 下创建 todos文件夹，创建Todos.js，内容如下：

import React, { useState } from ‘react’
import ‘./Todos.css’

function Todos() {
const [todos, setTodos] = useState([
{
content: ‘干洗衣服’,
isCompleted: true,
},
{
content: ‘理发’,
isCompleted: false,
},
{
content: ‘学习Kbone’,
isCompleted: false,
}
])

function handleKeyDown(e, i) {
if (e.key === ‘Enter’) {
createTodoAtIndex(e, i)
}
if (e.key === ‘Backspace’ && todos[i].content === ‘’) {
e.preventDefault();
return removeTodoAtIndex(i)
}
}

function createTodoAtIndex(e, i) {
const newTodos = […todos];
newTodos.splice(i + 1, 0, {
content: ‘’,
isCompleted: false,
})
setTodos(newTodos);
setTimeout(() => {
document.forms[0].elements[i + 1].focus();
}, 0)
}

function updateTodoAtIndex(e, i) {
const newTodos = […todos]
newTodos[i].content = e.target.value
setTodos(newTodos)
}

function removeTodoAtIndex(i) {
if (i === 0 && todos.length === 1) return
setTodos(todos => todos.slice(0, i).concat(todos.slice(i + 1, todos.length)))
setTimeout(() => {
document.forms[0].elements[i - 1].focus()
}, 0)
}

function toggleTodoCompleteAtIndex(index) {
const temporaryTodos = […todos]
temporaryTodos[index].isCompleted = !temporaryTodos[index].isCompleted
setTodos(temporaryTodos)
}

return (

React Todos

• 
  {todos.map((todo, i) => (
  <div key={todo+i} className={ todo ${todo.isCompleted && 'todo-is-completed'}}>
  <div className={‘checkbox’} onClick={() => toggleTodoCompleteAtIndex(i)}>
  {todo.isCompleted && (
  ✔
  )}
  

<input
type=“text”
value={todo.content}
onKeyDown={e => handleKeyDown(e, i)}
onChange={e => updateTodoAtIndex(e, i)}
/>

))}



)
}

export default Todos

#### 3.4 创建 Todos.css 样式

body {
background-color: #222222;
min-height: 100vh;
}

.app {
padding-top: 10rem;
}

.header {
display: flex;
flex-direction: column;

还有兄弟不知道网络安全面试可以提前刷题吗？费时一周整理的160+网络安全面试题，金九银十，做网络安全面试里的显眼包！

王岚嵚工程师面试题（附答案），只能帮兄弟们到这儿了！如果你能答对70%，找一个安全工作，问题不大。

对于有1-3年工作经验，想要跳槽的朋友来说，也是很好的温习资料！

【完整版领取方式在文末！！】

93道网络安全面试题

内容实在太多，不一一截图了

黑客学习资源推荐

最后给大家分享一份全套的网络安全学习资料，给那些想学习 网络安全的小伙伴们一点帮助！

对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。

1️⃣零基础入门

① 学习路线

对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。

② 路线对应学习视频

同时每个成长路线对应的板块都有配套的视频提供：

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以点击这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！