如何在Checkbox change ReactJs上立即反映值的变化

Question

我被困了整整一天。我希望当复选框被选中时，"完成"的值按照下面的计划更改。请帮助我，因为我正在学习这个。尝试使用usestate，但它不能工作。我下面使用的方法是一个可变方法，我知道它在react中不起作用。我尝试使用setTodo来设置对象，但它给出了一个完全不同的东西。下面是代码的链接:https://codesandbox.io/s/serene-lederberg-39ub6v?file=/src/App.js

下面是我的代码:

import "./styles.css";
import {useState} from 'react'
import Addtask from './Addtask'
export default function App() {

const dataset = [
{key:'', id: 1, title: 'Go to School', done: 'false'},
{key:'', id: 2, title: 'Go to Gym house', done: 'false'},
{key:'', id: 3, title: 'Go to Market', done: 'false'},
{key:'', id: 4, title: 'Go to Stadium', done: 'false'},
{key:'', id: 5, title: 'Go to Podium', done: 'false'},
]
const [todos, setTodos] = useState(dataset)
const [todo, setTodo] = useState('')


const todolist = todos.map(singletodo => {
return (

<ul style={{paddingBottom: '1em'}}>
<li> 
<span><input type='checkbox'  
onChange={(e) =>  {
if(e.target.checked){
alert('hello')
singletodo["done"] = 'true'
}else {
alert('nooooo')
singletodo["done"] = 'false'
}
}  }/><label> Completed </label>
</span>
</li>
<li>Title: {singletodo.title}</li>
<li>ID: {singletodo.id}</li>
<li>Done: {singletodo.done}</li>
<hr></hr><li> <button onClick ={()=> setTodos(todos.filter(bad => bad.key !==singletodo.key))} style={{float: 'left', }}>delete</button> 

<button style={{float: 'right',}}>edit</button></li>
</ul>)

});

return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<Addtask data ={todo} list = {todos} settodo = {setTodo} settodos ={setTodos}/>
{todolist}
</div>
);
}

Answer 1

在React中，当你想要更新一个状态被跟踪的数组时，你不仅需要更新数组，还需要调用它的setTodos。

一旦你用你想要做的改变更新了数组本身(在onChange中)。然后，您需要调用setTodos方法并将更新后的数组作为参数传入。

if (e.target.checked) {
alert('hello');
singletodo["done"] = 'true';
} else {
alert('nooooo');
singletodo["done"] = 'false';
}
setTodos(prevTodos => {
const updatedTodos = prevTodos.map(todo => {
if (todo.id === singletodo.id) {
return singletodo;
}
return todo;
});
return updatedTodos;
});

Answer 2

我编辑了你的代码:

import "./styles.css";
import { useState } from "react";
export default function App() {
const dataset = [
{ key: "", id: 1, title: "Go to School", done: "false" },
{ key: "", id: 2, title: "Go to Gym house", done: "false" },
{ key: "", id: 3, title: "Go to Market", done: "false" },
{ key: "", id: 4, title: "Go to Stadium", done: "false" },
{ key: "", id: 5, title: "Go to Podium", done: "false" }
];
const [todos, setTodos] = useState(dataset);
const setDoneForTodo = (isDone, index) => {
setTodos((todos) =>
todos.map((todo, i) => {
if (index === i) {
return { ...todo, done: isDone ? "true" : "false" };
} else {
return todo;
}
})
);
};
const todolist = todos.map((singletodo, index) => {
return (
<ul style={{ paddingBottom: "1em" }} key={index}>
<li>
<span>
<input
type="checkbox"
onChange={(e) => {
if (e.target.checked) {
setDoneForTodo(true, index);
} else {
setDoneForTodo(false, index);
}
}}
/>
<label> Completed </label>
</span>
</li>
<li>Title: {singletodo.title}</li>
<li>ID: {singletodo.id}</li>
<li>Done: {singletodo.done}</li>
<hr></hr>
<li>
{" "}
<button
onClick={() =>
setTodos(todos.filter((bad) => bad.key !== singletodo.key))
}
style={{ float: "left" }}
>
delete
</button>
<button style={{ float: "right" }}>edit</button>
</li>
</ul>
);
});
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
{todolist}
</div>
);
}

请点击此链接

你需要用setState来更新state，在本例中，使用setTodos代替todos状态!:

const setDoneForTodo = (isDone, index) => {
setTodos((todos) =>
todos.map((todo, i) => {
if (index === i) {
return { ...todo, done: isDone ? "true" : "false" };
} else {
return todo;
}
})
);
};