[英]Checkbox does not want to check or uncheck after clicking
Iterates on the todos
array. 迭代
todos
数组。 Objects inside have the isChecked
property. 内部的对象具有
isChecked
属性。 If isChecked === true
marks the checkbox, if isChecked === false
the checkbox is uncheckbox
. 如果
isChecked === true
标记该复选框,如果isChecked === false
该复选框为uncheckbox
。 When I click on the checkbox. 当我单击复选框时。 I can't mark or uncheckbox
我无法标记或取消选中
Demo here: https://stackblitz.com/edit/react-ds9rsd 演示在这里: https : //stackblitz.com/edit/react-ds9rsd
class App extends Component {
constructor() {
super();
this.state = {
todos: [
{
name:'A',
id: 1,
isChecked: true
},
{
name:'B',
id: 2,
isChecked: false
},
{
name:'C',
id: 3,
isChecked: true
}
]
};
}
checked = (e) => {
console.log(e.target.checked)
}
render() {
return (
<div>
{this.state.todos.map((todo, index) => {
return <input type="checkbox" checked={todo.isChecked} onChange={(e) => this.checked(e)}/>
})}
</div>
);
}
}
In checked() function you are just logging the value. 在checked()函数中,您只是在记录值。 Instead of that you need to do setState() to save new state.
相反,您需要执行setState()来保存新状态。
You will need to add a function and call it for each checkbox 您将需要添加一个函数并为每个复选框调用它
import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";
class App extends Component {
constructor() {
super();
this.state = {
todos: [
{
name: "A",
id: 1,
isChecked: true
},
{
name: "B",
id: 2,
isChecked: false
},
{
name: "C",
id: 3,
isChecked: true
}
]
};
}
checked = index => {
/** get the current state */
let _todos = this.state.todos;
/** assign opposite value: true to false or false to true */
_todos[index].isChecked = !_todos[index].isChecked;
/** update state */
this.setState({ todos: _todos });
};
render() {
return (
<div>
{this.state.todos.map((todo, index) => {
/** call the function passing the index value */
return (
<input
label={todo.name}
type="checkbox"
checked={todo.isChecked}
onChange={this.checked.bind(this, index)}
/>
);
})}
</div>
);
}
}
render(<App />, document.getElementById("root"));
A possibile solution could be updating the render function like this: 一个可能的解决方案可以像这样更新render函数:
render() {
return (
<div>
{this.state.todos.map((todo, index) => {
return <input label={todo.name} type="checkbox" checked={todo.isChecked}
onChange={(e) => this.checked(todo)}/>
})}
</div>
);
}
and the checked method like this: 和这样的检查方法:
checked = (e) => {
this.setState(state => {
const list = state.todos.map((item) => {
if (item.name === e.name) {
return item.isChecked = !item.isChecked;
} else {
return item;
}
});
return {
list,
};
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.