无法取消选中reactjs的复选框
是因为在React中，复选框的选中状态是由组件的状态（state）控制的。如果无法取消选中复选框，可能是因为复选框的状态没有正确更新。
要解决这个问题，可以按照以下步骤进行：
- 确保复选框的状态（checked属性）与组件的状态（state）绑定。在React中，可以使用state来保存复选框的选中状态，并通过setState方法更新状态。
- 在复选框的onChange事件中，更新组件的状态。当复选框的选中状态发生变化时，触发onChange事件，可以在事件处理函数中调用setState方法更新组件的状态。
- 确保复选框的value属性与组件的状态值一致。当复选框的value属性与组件的状态值一致时，复选框才能正确显示选中状态。
以下是一个示例代码，演示如何正确处理React中的复选框：
import React, { Component } from 'react';
class Checkbox extends Component {
constructor(props) {
super(props);
this.state = {
isChecked: false
};
}
handleCheckboxChange = () => {
this.setState(prevState => ({
isChecked: !prevState.isChecked
}));
}
render() {
return (
<div>
<label>
<input
type="checkbox"
value="checkboxValue"
checked={this.state.isChecked}
onChange={this.handleCheckboxChange}
/>
Checkbox Label
</label>
</div>
);
}
}
export default Checkbox;在上述示例中，Checkbox组件通过state来保存复选框的选中状态，并在handleCheckboxChange方法中更新状态。复选框的选中状态通过checked属性与组件的状态绑定，当复选框的选中状态发生变化时，会触发onChange事件，调用handleCheckboxChange方法更新组件的状态。
这是一个基本的示例，你可以根据实际需求进行修改和扩展。如果你需要更多关于React的学习资源，你可以参考腾讯云的React开发指南：React开发指南。
相关·内容
在我的父组件中，我有四个复选框，本质上，我希望每个复选框显示(如果选中)或不显示(如果没有选中)我在子组件中创建的函数的值。
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
input: '',
weatherFromInput: null,
dataTracker: null,
isChecked: false,
};
this.handleChange
浏览 0提问于2018-06-12得票数 0
回答已采纳
我试图在我的一个反应组件中创建一个表单。输入和Textarea工作正常，但我甚至不能让复选框或单选按钮出现。两种方法都不渲染，但它们的标签是这样的。我遵循了上的教程，但没有运气。
我是不是遗漏了什么？
，这是我拥有的：
export default class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
isChecked: true
};
this.handleCheck
浏览 3提问于2017-12-18得票数 0
我有一个简单的复选框组件：
import React, { Component } from 'react';
class Checkbox extends Component {
constructor(props) {
super(props);
this.state = { isChecked: false };
this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
}
render() {
return (
<div cla
浏览 3提问于2017-08-29得票数 0
回答已采纳
这是我的类组件：
import React from 'react';
import { Jumbotron, Container, Label } from 'reactstrap';
import './Css.css';
class Settings extends React.Component {
state = {
isChecked: false,
}
isCheck(e) {
this.setState({
isChecked: e.target.checked
})
浏览 2提问于2020-08-20得票数 1
回答已采纳
我正在设法检查是否在React.js组件中选中了复选框，然后将其存储在Firebase数据库中。
现在，我的复选框在3次复制后运行良好。我console.log(this.state.isChecked);和前2次点击返回“假”在我的控制台，我不明白为什么.然后，如果我继续单击它，就可以正常工作，并交替使用true和false。
这是我的代码：
import React, { Component } from 'react';
import Popup from './Popup';
class PostPopup extends Component {
浏览 2提问于2020-07-25得票数 0
回答已采纳
我有一些带有复选框的商品，一旦点击/选中，它们就会添加到购物车中。取消选中时，它们将再次添加到购物车中。当未选中时，我不确定如何切换选中以删除项目。 export class DestinationPrices extends React.Component {
constructor(props) {
super(props);
this.state = {
flightData: [],
isChecked: props.isChecked || false,
data: "",
cart: []
浏览 20提问于2019-04-12得票数 1
回答已采纳
2回答
我希望单击react组件中的多个复选框，并处理选中的复选框。当单击“验证”时，我想确认通过传递每个复选框的选中状态来检查名称和地址。有人能帮我吗？
export class Form extends React.Component<FormProps, {
...,
isChecked?: boolean
}> {
constructor(props: FormProps) {
super(props);
this.state = {
...,
isChecked:false
};
private checkF
浏览 6提问于2022-03-03得票数 -1
回答已采纳
我不明白为什么当我想再次点击它时，我的复选框没有被取消选中。我可以勾选，但不能取消勾选...我使用typescript react和next.js。有人能帮帮我吗？第一部分是当我调用句柄时，第二部分是当我使用我的表单时。 我不得不在第一次在块状态中描述我的所有状态，第二次在构造函数中。 export interface IdFormBlockProps {
}
export interface IdFormBlockState{
user: string;
email: string;
enterprise: string;
tel: numb
浏览 19提问于2021-03-15得票数 0
回答已采纳
你好，我在左侧循环多个复选框，基于选中的复选框，将选中的状态和复选框的值推入右侧并显示为复选框，如果我取消选中右侧的复选框，它将消失，但在消失右侧复选框后，左侧的复选框应更新为未选中...但是dom没有更新为未选中的....can，这是代码沙箱的链接：https://codesandbox.io/s/material-demo-eoiiv?file=/demo.js import React, { Component } from "react";
import { Col, Row } from "react-grid-system";
import For
浏览 17提问于2020-07-10得票数 0
回答已采纳
我有一个父组件：
import React, { Component } from "react";
import { Button } from "./Button";
export class Dashboard extends Component {
constructor(props) {
super(props);
this.state = {
numbers: [],
disabled: false
};
this.setNum = this.setNum.bind(this);
}
浏览 0提问于2018-10-23得票数 1
回答已采纳
1回答
我有两个复选框。其中之一将是默认选择的进入页面时，由道具。根据默认情况下选择的项目，在进入页面时应禁用其他复选框项。
此外，用户可以取消选择默认的选中项，在这种情况下，两个复选框都将启用以供选择。然后，当用户选择这两个选项中的一个时，将再次禁用非选定选项。
When :当我取消选择默认选项并重新选择两个复选框中的一个时，禁用的行为将正确工作(因为非选定的选项将被禁用)。
什么不工作，并需要找到一个修复：当我进入页面时，在默认情况下没有选择的选项需要禁用。我需要弄清楚如何在进入页面时禁用非选定选项。
我有一个类组件，其内容如下：
constructor(props) {
浏览 1提问于2022-01-18得票数 2
回答已采纳
嗨，这可能是一个非常新鲜的问题，但这是我的问题。我有代表一周中所有日子的复选框。如果选中某一天，我希望将其添加到数组中，以便在提交时可以将数组传递到后端。我从引导开始复制复选框结构。我试图添加逻辑，以查看是否选中了一个框，如果选中了，我希望将它推到状态下的空数组中。另外，如果选中了复选框，但未选中，则希望从状态数组中删除该项。到目前为止，我还没有找到办法让这一切都发挥作用。
import React from 'react'
class CalenderSettingsModal extends React.Component {
constructor(props)
浏览 4提问于2020-05-24得票数 5
回答已采纳
3回答
我有两个组成部分(父母和孩子)。父组件呈现大量子组件(Card)和页面的一般结构。每张卡都有一个独特的身份证。
每张卡都有一个复选框，复选框的初始状态应该是假的。我想动态地与父组件共享复选框的状态。因此，基本上，当我选中或取消选中卡片的复选框时，我想知道在父组件.中选中还是未选中哪一张卡。
父级
this.state = {
isChecked: false // I shouldn't set false?
}
onChange = (val) => {
this.setState({isChecked : val})
}
return re
浏览 2提问于2019-05-07得票数 0
我觉得我做得很对，但是状态并没有被切换。选中复选框时，我的状态不会更改为true。
export default class Room extends React.Component {
constructor(props) {
super(props);
this.state = {
isChecked: false
};
this.toggleChecked = this.toggleChecked.bind(this);
}
toggleChecked() {
浏览 15提问于2019-07-12得票数 1
回答已采纳
我有一个Top组件，它有一个复选框，也有一个子MyValidator组件。当复选框更改时，我在Top组件中有一个处理程序，该处理程序设置它的状态变量this.state.activeItemLocked。在MyValidator中指定的Top子组件具有一个带有此状态var的Prop。
但是，当Top更改其状态时，MyValidator不会被刷新，即使它应该呈现当前值，即从支持程序接收到的自己的状态变量：
顶
class Top extends React.Component {
constructor(props) {
super(props);
this.state
浏览 3提问于2021-03-12得票数 0
回答已采纳
我正在制作一个简单的react组件，用于跟踪表行中复选框的状态。
class EventRowAdmin extends Component {
constructor(props) {
super(props);
this.state = { isChecked: false };
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState(({ isChecked }) => (
{
isChecked: !
浏览 2提问于2018-05-27得票数 0
回答已采纳
2回答
我只想从ui语义中的(已选中或未选中)中获得值，其代码如下：
componentDidMount() {
this.setState({
startDate: moment()
.subtract(30, 'days')
.startOf('day'),
endDate: moment().endOf('day'),
isChecked: false,
});
}
无线电组件：
<Radio toggle className="ongoing
浏览 1提问于2020-03-23得票数 1
回答已采纳
2回答
我有一个包含这些数据的常量文件：
export let testing= [
{ id: 'test1', label: 'Test1' },
{ id: 'test2', label: 'Test2' },
{ id: 'test3', label: 'Test3' }
]
在我的checkboxes.js里
class CheckBoxes extends Component {
constructor(props) {
super(props);
this.st
浏览 1提问于2019-01-21得票数 1
回答已采纳
3回答
我有一个项目列表，每个项目都有自己的复选框，我决定尝试添加一个“select”复选框，以使用户更容易一次选择它们。
不幸的是，我发现很难用一种“反应”的方式来理解逻辑。
我找到了一个JSBIN，说明我希望呈现的结果如何工作-- 注意:这是一种与我希望的方式不同的设置。
我现在的代码是：
import React, { Component } from "react";
import ReactDOM from "react-dom";
class Items extends Component {
state = {
categorie
浏览 1提问于2018-09-17得票数 3
回答已采纳
我是react的新手，在为我的应用程序创建复选框时遇到了问题。我能够设置一些只适用于一个复选框选项的东西，但是我现在遇到的问题是多个复选框选项。 每当我单击一个复选框时，它都会自动选中所有其他复选框 这是我目前正在编写的代码。 import React, { Component, } from 'react';
export default class Checkbox extends Component {
constructor(props) {
super();
let initialState = {
浏览 8提问于2019-05-28得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
