如何切换 React 组件的布尔状态？

你应该在这里使用 this.state.check而不是 check.value:

this.setState({check: !this.state.check})

但无论如何，这是 坏习惯这样做。最好将它移动到单独的方法，不要直接在标记中写回调函数。

更新: 正如评论中指出的那样，这种方法可能会导致意想不到的结果，因为 React 的状态是异步的。 在这种情况下，正确的方法是使用回调:

this.setState(({ check }) => ({ check: !check }));

试试:

<label><input type=checkbox" value="check" onChange = {(e) => this.setState({check: !this.state.check.value})}/> Checkbox </label>

使用 check: !check.value意味着它正在查找您尚未声明的 check对象。

您需要指定您想要的 this.state.check的相反值。

使用 checked来获得值。在 onChange期间，checked将是 true，它将是 boolean的一种类型。

希望这个能帮上忙！

class A extends React.Component {
constructor() {
super()
this.handleCheckBox = this.handleCheckBox.bind(this)
this.state = {
checked: false
}
}
  

handleCheckBox(e) {
this.setState({
checked: e.target.checked
})
}
  

render(){
return <input type="checkbox" onChange={this.handleCheckBox} checked={this.state.checked} />
}
}


ReactDOM.render(<A/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

既然没有人发布这个，我就发布正确的答案。如果您的新状态更新依赖于以前的状态，那么总是使用函数形式的 setState，它接受返回新状态的函数作为参数。

就你而言:

this.setState(prevState => ({
check: !prevState.check
}));

参见 医生

因为这个答案正在变得流行，增加了应该用于 React Hooks (v16.8 +)的方法:

如果您使用的是 useState钩子，那么使用以下代码(如果您的新状态依赖于前一个状态) :

const [check, setCheck] = useState(false);
// ...
setCheck(prevCheck => !prevCheck);

当我搜索使用 Redux 在 React 组件中使用切换状态时，我在这个页面中着陆，但是我在这里没有找到任何使用相同方法的方法。

因此，我认为它可能有助于那些正在努力使用 Redux 实现切换状态的人。

我的减速器文件放在这里。默认情况下我得到初始状态 假的。

const INITIAL_STATE = { popup: false };
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case "POPUP":
return {
...state,
popup: action.value
};
default:
return state;
}
return state;
};

我在点击图像时改变状态。所以，我的 img 标签在这里使用 onClick 函数。

<img onClick={togglePopup} src={props.currentUser.image} className="avatar-image avatar-image--icon" />

下面是我的切换弹出窗口函数，它调用 Dispatcher。

const togglePopup = ev => {
ev.preventDefault();
props.handlePopup(!props.popup);
};

这个调用转到下面的 mapDispatchToProps 函数，该函数反映被切换的状态。

const mapDispatchToProps = dispatch => ({
handlePopup: value => dispatch({ type: "POPUP", value })
});

谢谢你。

我发现在切换布尔值时这是最简单的。简单地说，如果该值已经为 true，那么它将其设置为 false，反之亦然。小心未定义的错误，确保在执行之前定义了属性

this.setState({
propertyName: this.propertyName = !this.propertyName
});

根据您的上下文，这将允许您更新给定 mouseEnter 函数的状态。无论哪种方式，通过将状态值设置为 true: false，您都可以通过使用 !this.state.variable将给定的任何函数设置为相反的值来更新该状态值

state = {
hover: false
}


onMouseEnter = () => {
this.setState({
hover: !this.state.hover
});
};

您还可以使用 React 的 useState挂钩来声明函数组件的本地状态。变量 toggled的初始状态已作为参数传递给方法 .useState。

import { render } from 'react-dom';
import React from "react";


type Props = {
text: string,
onClick(event: React.MouseEvent<HTMLButtonElement>): void,
};


export function HelloWorldButton(props: Props) {
const [toggled, setToggled] = React.useState(false); // returns a stateful value, and a function to update it
return <button
onClick={(event) => {
setToggled(!toggled);
props.onClick(event);
}}
>{props.text} (toggled: {toggled.toString()})</button>;
}




render(<HelloWorldButton text='Hello World' onClick={() => console.log('clicked!')} />, document.getElementById('root'));

Https://stackblitz.com/edit/react-ts-qga3vc

下面是一个使用 Hook 的示例(需要 React > = 16.8.0)

// import React, { useState } from 'react';
const { useState } = React;


function App() {
const [checked, setChecked] = useState(false);
const toggleChecked = () => setChecked(value => !value);
return (
<input
type="checkbox"
checked={checked}
onChange={toggleChecked}
/>
);
}


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>


<div id="root"><div>

设置: const [state, setState] = useState(1);

切换: setState(state*-1);

用途: state > 0 ? 'on' : 'off';

我知道这是一个老问题，但这是一个非常常见的用例。

如果你想简单地用钩子切换一个布尔状态:

setIsToggled(state => !state)

您只需提供一个接受当前状态的回调。