Circle checkbox in react.js

Question

我目前正在学习react.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 Body

CSS:

* {
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;
}

Answer 1

虽然圆圈checkbox就像radio button，可能会给用户造成误解，但顺便说一下，这就是你想要的。

const {
useState
} = React;
const Test = () => {
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"> add </i> </div>         <div className = "todos" > {
toDos.map((obj) => {
return ( <div className ="todo">
<div className="left">
<label class="container">
<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 = "" />
<span class="checkmark"></span>
</label>
<p className ='todoName'> {
obj.text
} </p> </div>
<div className = "right">
<i onClick = {
() => deleteTodo(obj.id)
}
className = "fas fa-trash" > delete </i> 
</div > 
</div>)
})
}

{
toDos.map((obj) => {
if (obj.status) {
return ( < h1 className = "finished" > {
obj.text
} </h1>)
}
return null
})
}

</div>
</div>
)
}
ReactDOM.render( < Test / > ,
document.getElementById('root')
)

/*****************Added By Ahmad*****************/
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 25px;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.todo{
display:flex;
align-items: center;
margin: 10px;
}
.todo .left{
display:flex;
align-items: center;
}
.todo .right{
display:flex;
align-items: center;
}
.todoName{
margin:0 10px;}
/*****************Added By Ahmad*****************/

* {
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;


display: flex;
flex-direction: row;
align-items: center;
}
.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>