react.js 中的圆形复选框

Question

I am currently learning reacj.js and I am making a Todo app using react.js. I need to make a checkbox alongside the task and when that checkbox is clicked the task should move to completed section. I made it possible but I need a circle checkbox. How can I make a circle checkbox???

Here's my code:

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

Although a circle checkbox is like a radio button and maybe it makes a misunderstanding for user, by the way here is what you want.

 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>