【发布时间】：2021-10-22 13:26:05
【问题描述】：
我目前正在学习 reacj.js，并且正在使用 react.js 制作一个 Todo 应用程序。我需要在任务旁边制作一个复选框，当单击该复选框时，任务应移至已完成部分。我做到了，但我需要一个圆形复选框。如何制作一个圆形复选框???
这是我的代码：
Javascript：
import React from 'react'
import {useState} from 'react'
function Body() {
const [toDos,setToDos] = useState([])
const [toDo,setToDo] = useState('')
const deleteTodo = idToDelete => setToDos(currentTodos => currentTodos.filter(toDo => toDo.id !== idToDelete))
return (
<div className="bodyoftodo">
<div className="input">
<input value={toDo} onChange={(e)=>setToDo(e.target.value)} type="text" placeholder="????️ Add item..." />
<i onClick={()=>setToDos([...toDos,{id:Date.now() ,text: toDo, status: false}])} className="fas fa-plus"></i>
</div>
<div className="todos">
{toDos.map((obj)=>{
return(
<div className="todo">
<div className="left">
<input onChange={(e)=>{
console.log(e.target.checked);
console.log(obj);
setToDos(toDos.filter(obj2=>{
if(obj2.id===obj.id){
obj2.status=e.target.checked
}
return obj2
}))
}} value={obj.status} type="checkbox" name="" id="" />
<p className='todoName' >{obj.text}</p>
</div>
<div className="right">
<i onClick ={() => deleteTodo(obj.id)} className="fas fa-trash"></i>
</div>
</div>)
}) }
{
toDos.map((obj)=>{
if(obj.status){
return(<h1 className="finished" >{obj.text}</h1>)
}
return null
})
}
</div>
</div>
)
}
export default BodyCSS：
* {
margin: 0;
padding: 0;
font-family: "Segoe","Segoe UI","Arial","sans-serif";
}
.body{
font-family: 'Roboto', sans-serif;
}
.app {
position: absolute;
transform: translate(-50%, -10%);
}
.app {
text-align: center;
}
.app h1,
h2 {
color: white;
}
.app .input {
display: contents;
justify-content: center;
align-items: center;
}
.app .input {
margin-top: 0.8em;
width: 80em;
height: 3em;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 6px;
padding: 5px;
}
.app .input input {
width: 100%;
height: 1.6em;
border-color: transparent;
outline-color: transparent;
}
.app i {
cursor: pointer;
font-size: larger;
font-weight: 900;
color: grey;
margin-right: 5px;
}
.app .todos {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.app .todos .todo {
margin-top: 0.8em;
width: 80em;
height: 3em;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 6px;
padding: 5px;
}
.app .todos .todo .left {
display: flex;
justify-content: flex-start;
align-items: center;
}
.app .todos .todo .left {
margin-left: 3px;
font-size: medium;
font-weight: 700;
font-family: 'Roboto', sans-serif;
color: grey;
}
.mainHeading{
font-family: 'Roboto', sans-serif;
color: white;
}
.subHeading{
font-family: 'Roboto', sans-serif;
}
.finished{
font-family: 'Roboto', sans-serif;
margin-top: 25px;
}
input:focus, textarea:focus {
outline: none;
}
input[type="text"]{
font-family: 'Roboto', sans-serif;
font-size:15px;
}
.todoName {
margin-left: 0.7em;
margin-top: 1em;
}
.navbar{
height: 48px;
background-color: rgb(0, 96, 172);
width: 85.4em;
position: fixed;
z-index: 1;
margin-top: 0em;
margin-left: 0em;
margin-right: 0em;
}
.bodyoftodo{
position: fixed;
}
.titletodo{
font-weight: 600;
font-family: SegoeUI-SemiBold-final,Segoe UI Semibold,SegoeUI-Regular-final,Segoe UI,"Segoe UI Web (West European)",Segoe,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Tahoma,Helvetica,Arial,sans-serif;
font-size: 16px;
line-height: 30px;
margin: 1em;
padding: 1em;
}
.linktitle{
text-decoration:none;
color: white;
}
.linktitle:hover {
color:white;
}
.input{
margin-left: 2.5em;
}【问题讨论】：
-
这里已经回答了：How to make checkbox rounded
-
@IshanBassi 但它没有用。
标签： javascript css reactjs checkbox