天道酬勤,学无止境

如何切换反应组件的布尔状态?(How to toggle boolean state of react component?)

问题

我想知道如何切换反应组件的布尔状态。 例如:

我在组件的构造函数中进行了布尔状态检查:

constructor(props, context) { 
   super(props, context);

   this.state = {
      check: false
   };
};

每次单击复选框时,我都尝试使用 this.setState 方法切换状态:

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

当然我得到一个Uncaught ReferenceError: check is not defined 。 那么我怎样才能做到这一点呢?

提前谢谢了。

回答1

由于没有人发布此内容,因此我发布了正确答案。 如果您的新状态更新取决于之前的状态,请始终使用setState的函数形式,它接受一个返回新状态的函数作为参数。

在你的情况下:

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

查看文档


由于这个答案变得流行,添加应该用于 React Hooks (v16.8+) 的方法:

如果您使用的是 useState 钩子,则使用以下代码(以防您的新状态依赖于以前的状态):

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

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

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

但无论如何,这样做是不好的做法。 最好将其移动到单独的方法中,并且不要直接在标记中编写回调。

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

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

这是一个使用钩子的例子(需要 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>
回答4

使用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>
回答5

您还可以使用 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

回答6

尝试:

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

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

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

回答7

在切换布尔值时,我发现这是最简单的。 简单地说,如果该值已经为真,则将其设置为假,反之亦然。 当心未定义的错误,确保您的属性在执行之前已定义

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

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

state = {
  hover: false
}

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

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

所以,我认为它可能会帮助那些正在努力使用 Redux 实现切换状态的人。

我的减速器文件放在这里。 默认情况下,我的初始状态为false

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" />

我的 Toggle Popup 函数在下面,它调用 Dispatcher。

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

此调用转到 mapDispatchToProps 函数下方,该函数反映了切换状态。

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

谢谢你。

回答10

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

切换: setState(state*-1);

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

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 在React中显示或隐藏元素(Show or hide element in React)
    问题 我第一次弄乱React.js,找不到通过click事件在页面上显示或隐藏内容的方法。 我没有在页面上加载任何其他库,因此我正在寻找使用React库的本机方法。 到目前为止,这就是我所拥有的。 我想在click事件触发时显示结果div。 var Search= React.createClass({ handleClick: function (event) { console.log(this.prop); }, render: function () { return ( <div className="date-range"> <input type="submit" value="Search" onClick={this.handleClick} /> </div> ); } }); var Results = React.createClass({ render: function () { return ( <div id="results" className="search-results"> Some Results </div> ); } }); React.renderComponent(<Search /> , document.body); 回答1 大约在2020年做出反应 在onClick回调中,调用状态挂钩的setter函数以更新状态并重新呈现:
  • 如何在安装/卸载之间保持React组件状态?(How to keep React component state between mount/unmount?)
    问题 我有一个简单的组件<StatefulView> ,它维护内部状态。 我有另一个组件<App> ,用于切换是否呈现<StatefulView> 。 但是,我想在安装/取消安装之间保持<StatefulView>的内部状态。 我以为可以在<App>实例化该组件,然后控制其是否已渲染/安装。 var StatefulView = React.createClass({ getInitialState: function() { return { count: 0 } }, inc: function() { this.setState({count: this.state.count+1}) }, render: function() { return ( <div> <button onClick={this.inc}>inc</button> <div>count:{this.state.count}</div> </div> ) } }); var App = React.createClass({ getInitialState: function() { return { show: true, component: <StatefulView/> } }, toggle: function() { this.setState({show: !this.state
  • 在React中切换类(Toggle Class in React)
    问题 我在有菜单按钮的项目中使用react。 <a ref="btn" href="#" className="btn-menu show-on-small"><i></i></a> 还有一个Sidenav组件,例如: <Sidenav ref="menu" /> 我编写了以下代码来切换菜单: class Header extends React.Component { constructor(props){ super(props); this.toggleSidenav = this.toggleSidenav.bind(this); } render() { return ( <div className="header"> <i className="border hide-on-small-and-down"></i> <div className="container"> <a ref="btn" href="#" className="btn-menu show-on-small"><i></i></a> <Menu className="menu hide-on-small-and-down"/> <Sidenav /> </div> </div> ) } toggleSidenav() { this.refs.btn.classList.toggle('btn
  • 反应-切换类onclick(REACT - toggle class onclick)
    问题 我试图弄清楚如何切换活动类onClick来更改CSS属性。 我采用了许多方法,并阅读了许多SO答案。 使用jquery会相对简单,但是,我不知道要用react做到这一点。 我的代码如下。 谁能建议我该怎么做? 如果不为每个项目创建新组件,是否可以这样做? class Test extends Component(){ constructor(props) { super(props); this.addActiveClass= this.addActiveClass.bind(this); } addActiveClass() { //not sure what to do here } render() { <div> <div onClick={this.addActiveClass}> <p>1</p> </div> <div onClick={this.addActiveClass}> <p>2</p> </div> <div onClick={this.addActiveClass}> <p>3</p> </div> </div> } } 回答1 使用状态。 Reacts文档在这里。 class MyComponent extends Component { constructor(props) { super(props); this.addActiveClass
  • ReactJS:最大更新深度超出错误(ReactJS: Maximum update depth exceeded error)
    问题 我试图在ReactJS中切换组件的状态,但出现错误: 超过最大更新深度。 当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时,可能会发生这种情况。 React限制了嵌套更新的数量,以防止无限循环。 我没有在代码中看到无限循环,有人可以帮忙吗? ReactJS组件代码: import React, { Component } from 'react'; import styled from 'styled-components'; class Item extends React.Component { constructor(props) { super(props); this.toggle= this.toggle.bind(this); this.state = { details: false } } toggle(){ const currentState = this.state.details; this.setState({ details: !currentState }); } render() { return ( <tr className="Item"> <td>{this.props.config.server}</td> <td>{this.props.config.verbose}
  • 反应:为什么道具改变时子组件不更新(React: why child component doesn't update when prop changes)
    问题 为什么在以下伪代码示例中,当Container更改foo.bar时,Child不会重新呈现? Container { handleEvent() { this.props.foo.bar = 123 }, render() { return <Child bar={this.props.foo.bar} /> } Child { render() { return <div>{this.props.bar}</div> } } 即使在修改Container中的值后调用forceUpdate() ,Child仍会显示旧值。 回答1 更新子项,使其属性“键”等于名称。 每次更改键时,组件都会重新渲染。 Child { render() { return <div key={this.props.bar}>{this.props.bar}</div> } } 回答2 因为如果父项的props发生变化,但是STATE的状态发生变化,则子项不会重新呈现: 您显示的是这样的:https://facebook.github.io/react/tips/communicate-between-components.html 它将通过prop将数据从父级传递到子级,但是那里没有重渲染逻辑。 您需要为父级设置一些状态,然后在父级更改状态下重新渲染子级。 这可能会有所帮助。 https:/
  • 在react native中隐藏/显示组件(Hide/Show components in react native)
    问题 我真的是React Native的新手,我想知道如何隐藏/显示组件。 这是我的测试用例: <TextInput onFocus={this.showCancel()} onChangeText={(text) => this.doSearch({input: text})} /> <TouchableHighlight onPress={this.hideCancel()}> <View> <Text style={styles.cancelButtonText}>Cancel</Text> </View> </TouchableHighlight> 我有一个TextInput组件,我想要的是在输入获得焦点时显示TouchableHighlight ,然后在用户按下“取消”按钮时隐藏TouchableHighlight 。 我不知道如何“访问” TouchableHighlight组件以将其隐藏/显示在我的函数showCancel/hideCancel 。 另外,如何从一开始就隐藏按钮? 回答1 我会做这样的事情: var myComponent = React.createComponent({ getInitialState: function () { return { showCancel: false, }; }, toggleCancel: function ()
  • React的出色表现(Big list performance with React)
    问题 我正在用React实现一个可过滤列表。 列表的结构如下图所示。 前提 这是它应该如何工作的描述: 状态位于最高级别的组件( Search组件)中。 状态描述如下: { visible : boolean, files : array, filtered : array, query : string, currentlySelectedIndex : integer } files是一个可能非常大的包含文件路径的数组(10000个条目是一个合理的数字)。 filtered是在用户键入至少2个字符之后的过滤阵列。 我知道它是派生数据,因此可以就将其存储在状态中进行论证,但对于 currentlySelectedIndex ,它是过滤列表中当前选定元素的索引。 用户在Input组件中Input两个以上的字母,对数组进行过滤,并为过滤后的数组中的每个条目呈现一个Result组件每个Result组件都显示与查询部分匹配的完整路径,并突出显示该路径的部分匹配部分。 例如,如果用户键入了“ le”,那么Result组件的DOM将是这样的: <li>this/is/a/fi<strong>le</strong>/path</li> 如果用户在Input组件currentlySelectedIndex焦点状态时按下向上或向下键,则Input会基于filtered数组发生变化。
  • react-bootstrap 如何在选择项目时折叠菜单(react-bootstrap how to collapse menu when item is selected)
    问题 选择项目后如何使菜单折叠? 我不知道如何让它在小提琴上工作,但这就是我要做的? https://jsfiddle.net/vjeux/kb3gN/ import React from 'react'; import {Navbar, Nav, NavItem, NavDropdown, DropdownButton, MenuItem, CollapsibleNav} from 'react-bootstrap'; export default class App extends React.Component { constructor(props) { super(props); this.onSelect = this.onSelect.bind(this); this.toggleNav = this.toggleNav.bind(this); // this.state = {navExpanded: false}; } onSelect(e){ console.log('OnSelect') // console.log(this.state.navExpanded); // this.setState({navExpanded: false}); } toggleNav(){console.log('toggle...')}; // <Navbar
  • 在React Native中以编程方式添加组件(Programmatically add a component in React Native)
    问题 假设我有一个简单的React Native应用程序,如下所示: 'use strict'; var React = require('react-native'); var { AppRegistry, Text, TouchableHighlight, View, } = React; var ReactProject = React.createClass({ _onPressOut: function() { // What do we do here? }, render() { return ( <View> <Text>This text should be before</Text> <Text>This text should be after</Text> <TouchableHighlight onPressOut={this._onPressOut}> <Text>Tap Me</Text> </TouchableHighlight> </View> ); } }); AppRegistry.registerComponent('ReactProject', () => ReactProject); 按下TouchableHighlight时,如何在第一和第二个Text标记之间动态插入组件? 回答1 尝试创建一个数组并将其附加到状态。 然后
  • React - 动画安装和卸载单个组件(React - animate mount and unmount of a single component)
    问题 这么简单的事情应该很容易完成,但我对它的复杂程度感到困惑。 我想要做的就是动画安装和卸载 React 组件,就是这样。 这是我到目前为止所尝试的以及为什么每个解决方案都不起作用的原因: ReactCSSTransitionGroup - 我根本没有使用 CSS 类,它都是 JS 样式,所以这行不通。 ReactTransitionGroup - 这个较低级别的 API 很棒,但它要求您在动画完成时使用回调,因此在这里仅使用 CSS 过渡不起作用。 总是有动画库,这就引出了下一点: GreenSock - 许可对商业用途 IMO 过于严格。 React Motion - 这看起来很棒,但TransitionMotion对我需要的东西来说非常混乱且过于复杂。 当然,我可以像 Material UI 那样做一些诡计,其中元素被渲染但保持隐藏( left: -10000px ),但我不想走那条路。 我认为它很hacky,我希望我的组件卸载,以便它们清理并且不会弄乱 DOM。 我想要一些易于实施的东西。 在安装时,为一组样式设置动画; 在卸载时,为相同(或另一组)样式设置动画。 完毕。 它还必须在多个平台上具有高性能。 我在这里撞到了一堵砖墙。 如果我遗漏了什么并且有一种简单的方法可以做到这一点,请告诉我。 回答1 这有点冗长,但我已使用所有本机事件和方法来实现此动画。
  • 反应输入defaultValue不会随着状态更新(React input defaultValue doesn't update with state)
    问题 我正在尝试创建一个带有react的简单表单,但是面临使数据正确绑定到表单的defaultValue的困难。 我正在寻找的行为是这样的: 当我打开页面时,应在数据库中的“文本”输入字段中填写AwayMessage的文本。 那就是“样本文本” 理想情况下,如果数据库中的AwayMessage没有文本,则希望在“文本”输入字段中有一个占位符。 但是,现在,我发现每次刷新页面时,“文本”输入字段均为空白。 (尽管我在输入中键入的内容可以正确保存并持久保存。)我认为这是因为当AwayMessage为空对象时,输入文本字段的html会加载,而当awayMessage加载时,输入文本字段的html不会刷新。 另外,我无法为该字段指定默认值。 为了清楚起见,我删除了一些代码(即onToggleChange) window.Pages ||= {} Pages.AwayMessages = React.createClass getInitialState: -> App.API.fetchAwayMessage (data) => @setState awayMessage:data.away_message {awayMessage: {}} onTextChange: (event) -> console.log "VALUE", event.target.value onSubmit
  • Material UI - 在 AppBar 单击打开 LeftNav / Drawer(Material UI - Open LeftNav / Drawer on AppBar click)
    问题 我正在发现 ReactJS 和 material-ui (http://material-ui.com/)。 我尝试为我的应用程序创建一个默认模板。 我想在分离的组件中使用 AppBar 和LeftNav(在新版本中在 Drawer 中重命名) 。 默认情况下,AppBar 上有一个菜单按钮。 我想用它来打开 LeftNav 但我不知道如何调用我的 LeftBarComponent 组件函数来打开它。 我几乎已经了解如何在组件之间进行通信,但就我而言,我不知道该怎么做,因为没有关于它的文档。 我知道打开 LeftNav 元素的唯一方法是使用 LeftNav.toggle() http://material-ui.com/#/components/left-nav 谢谢你的帮助。 默认.jsx use strict'; var React = require('react'); var pageStore = require('../../stores/page'); var MainNavbar = require('../modules/navbar.jsx'); var LeftNavbar = require('../modules/leftbar.jsx'); var getState = function() { return { title: pageStore
  • 在同一页面/路由上具有相同的可重用redux反应组件的多个实例(having multiple instance of same reusable redux react components on the same page/route)
    问题 我们正在创建一个大型的前端应用程序。 我们正在使用React-Redux 我们正在创建一些可重用的组件。 这个问题是关于在同一页面/路由上具有相同的可重用redux react组件的多个实例 问题详细信息: 我们有一个Sectionheader组件。 绑定到redux状态。 它侦听header属性reducer SectionheaderReducer 。 由于我们在页面上有此Sectionheader 2个实例,这两个实例都倾向于显示相同的值,因为它们绑定到相同的存储状态属性。 如何使基于Redux的可重用React组件可配置? 这样每个实例可以为化SectionheaderReducer器SectionheaderReducer具有不同的header属性值 回答1 您需要实现某种命名实例的方式。 这可以像传递密钥以区分组件和异径管一样基本。 您可以在mapStateToProps函数中使用ownProps来引导映射到名称空间 const mapStateToProps = (state, ownProps) { let myState = state[ownProps.namespace] return { myState.value } } 可以使用相同的方法将名称空间传递给mapDispatchToProps const mapDispatchToProps =
  • 反应条件渲染模式(React conditional render pattern)
    问题 我已经实现了一个在屏幕上显示模态对话框的模态组件。 通常,模态将有条件地显示。 在渲染函数中有两种方法可以做到这一点: render(){ ... <Modal show={this.state.showModal}> // something in modal </Modal> } 在 Modal 组件中,我使用 this.props.show 向自身添加一个不同的类。 当这是 false 时,它​​会添加一个 display:none 来隐藏模态。 另一种方式是这样的: render(){ ... { this.state.showModal && (<Modal> // something in modal </Modal>) } } 这使用showModal来决定是否在渲染中添加 Modal。 我想弄清楚的是: 这两种方式有什么不同? 其中一个比另一个更好吗? 有没有另一种方法可以做到这一点? 编辑:似乎不同的人有不同的偏好。 对我自己来说,我更喜欢@ErikTheDeveloper 所说的。 显示/隐藏Modal的能力应该保留在Modal内部,当我们不需要显示Modal时,我们可以在Modal中返回null。 我想也许对于哪种方式更好没有确定的答案。 也许这只是个人选择? 回答1 不久前我回答了一个与打开/关闭模态的最佳方式有关的类似问题 从那以后,我在 React
  • 如何动态地将类添加到手动类名称?(How to dynamically add a class to manual class names?)
    问题 我需要将动态类添加到常规类列表中,但是不知道如何(我正在使用babel),如下所示: <div className="wrapper searchDiv {this.state.something}"> ... </div> 有任何想法吗? 回答1 您可以使用普通的JavaScript来执行此操作: className={'wrapper searchDiv ' + this.state.something} 或带有反引号的字符串模板版本: className={`wrapper searchDiv ${this.state.something}`} 这两种类型当然都是JavaScript,但是第一种模式是传统类型。 无论如何,在JSX中,用大括号括起来的所有内容都将作为JavaScript执行,因此您基本上可以在该处执行任何操作。 但是,结合使用JSX字符串和大括号对属性来说是行不通的。 回答2 根据项目增长时需要添加的动态类的数量,可能值得在GitHub上查看JedWatson的classnames实用程序。 它使您可以将条件类表示为对象,并返回评估结果为true的条件类。 因此,以其React文档为例: render () { var btnClass = classNames({ 'btn': true, 'btn-pressed': this.state
  • 如何让反应路由器以 404 状态代码响应?(How to let react router respond with 404 status code?)
    问题 我以 root 身份使用 react router,“/”下的所有请求都指向 react router。 当 react router 发现 url 与任何定义的组件都不匹配时,它会使用 NoMatch 组件进行渲染。 问题来了,NoMatch 被渲染,这就是我想要的,但状态代码仍然是 200 而不是 404。当我的 css 或 js 文件被放置在错误的 url 响应路由器做同样的事情时,它响应 200 ! 然后页面告诉我我的资源内容类型有问题! 那么,我如何使用反应路由器来处理“/”中的所有内容,并仍然正确处理 404 错误(以 404 状态代码响应)? 反应路由器中的代码 render(( <Router history={browserHistory}> <Route path="/" component={App}> <IndexRoute component={Index}/> <Route path="archived" component={App}> <IndexRoute component={ArchivedPage}/> <Route path="project/:projectId" component={ArchivedDetailPage}/> </Route> <Route path="*" component={NoMatch}/> <
  • 使用React重新调整浏览器的渲染视图(Rerender view on browser resize with React)
    问题 调整浏览器窗口大小时,如何让React重新渲染视图? 背景 我有一些块要在页面上单独布局,但是我还希望它们在浏览器窗口更改时进行更新。 最终结果将类似于Ben Holland的Pinterest布局,但使用React编写的不仅是jQuery。 我还有一段路要走。 代码 这是我的应用程序: var MyApp = React.createClass({ //does the http get from the server loadBlocksFromServer: function() { $.ajax({ url: this.props.url, dataType: 'json', mimeType: 'textPlain', success: function(data) { this.setState({data: data.events}); }.bind(this) }); }, getInitialState: function() { return {data: []}; }, componentWillMount: function() { this.loadBlocksFromServer(); }, render: function() { return ( <div> <Blocks data={this.state.data}/> </div> );
  • 在 React 中的组件之间共享数据(Sharing data between components in React)
    问题 我正在使用 Meteor 和 React 作为视图引擎开发应用程序 考虑这个图: 从另一个例子中反应隐藏组件 当 C4 按钮单击事件被触发时,我需要更改 C2 组件状态。 由于它们没有直接关系,我无法直接从 C4 访问 C2 状态。 另一个示例是从组件提交表单并获取在另一个组件中声明的数据(输入字段的值)。 我知道有一些可能的技巧可以解决这个问题(例如 Meteor Session、通过每个组件传递数据、基于通量的 Action/Dispatcher)。 React docs 建议使用事件/订阅系统(flux 是一个可能的解决方案,但flux 远不止于此...)组件之间的通信 Redux 是另一种可能性(我有点担心,对于大型应用程序,如果我有很多动作,则组合减速器功能会爆炸,而且缺少特定于动作的订阅系统 - 就我知道当调度一个动作时所有的监听器都会被执行——我是 redux 的新手,也许我错了) Flux 或 Redux 是有效的模式,满足比我更大的需求,我已经有了 Meteor 来完成这种工作。 我唯一的需要是访问另一个内部的组件状态...... 对于具有大量组件视图的中/大型应用程序,我需要一个可扩展的解决方案 解决该问题的“正确”方法是什么? 更新: 最近我给了 redux 一个机会,它似乎完成了这项工作(它真的很棒并且得到了很好的支持),所以如果你处于相同的情况
  • 允许打字稿编译器仅在一个反应​​状态属性上调用setState(allow typescript compiler to call setState on only one react state property)
    问题 我正在将Typescript与React一起用于一个项目。 主组件通过此接口获得通过状态。 interface MainState { todos: Todo[]; hungry: Boolean; editorState: EditorState; //this is from Facebook's draft js } 但是,下面的代码(仅摘录)不会编译。 class Main extends React.Component<MainProps, MainState> { constructor(props) { super(props); this.state = { todos: [], hungry: true, editorState: EditorState.createEmpty() }; } onChange(editorState: EditorState) { this.setState({ editorState: editorState }); } } 编译器抱怨说,在我仅尝试为一个属性设置setState的onChange方法中,类型{ editorState: EditorState;}缺少属性todos和hungry的属性。 换句话说,我需要在onChange函数中设置所有三个属性的状态,以使代码得以编译。 为了使其编译,我需要做