Tag: reactjs

为什么我们需要在Redux中使用asynchronousstream的中间件?

根据文档, “没有中间件,Redux商店只支持同步数据stream” 。 我不明白为什么是这样。 为什么容器组件不能调用asynchronousAPI,然后dispatch这些操作? 例如,想象一个简单的用户界面:一个字段和一个button。 当用户按下button时,该字段将填充来自远程服务器的数据。 import * as React from 'react'; import * as Redux from 'redux'; import { Provider, connect } from 'react-redux'; const ActionTypes = { STARTED_UPDATING: 'STARTED_UPDATING', UPDATED: 'UPDATED' }; class AsyncApi { static getFieldValue() { const promise = new Promise((resolve) => { setTimeout(() => { resolve(Math.floor(Math.random() * 100)); }, […]

为什么调用setState方法不会立即改变状态?

好吧,我会尽力使这个快速,因为它应该是一个简单的修复… 我读过一堆类似的问题,答案似乎很明显。 没有什么我永远不得不仰视! 但是…我有一个错误,我无法理解如何解决或为什么发生。 如下: class NightlifeTypes extends Component { constructor(props) { super(props); this.state = { barClubLounge: false, seeTheTown: true, eventsEntertainment: true, familyFriendlyOnly: false } this.handleOnChange = this.handleOnChange.bind(this); } handleOnChange = (event) => { if(event.target.className == "barClubLounge") { this.setState({barClubLounge: event.target.checked}); console.log(event.target.checked) console.log(this.state.barClubLounge) } } render() { return ( <input className="barClubLounge" type='checkbox' onChange={this.handleOnChange} checked={this.state.barClubLounge}/> ) } […]

如何使用箭头函数(公共类字段)作为类方法?

我是新使用React的ES6类,以前我一直在绑定我的方法到当前对象(在第一个例子中显示),但是ES6允许我永久地将一个类的函数绑定到带有箭头的类实例吗? (作为callback函数传递时很有用。)当我尝试像使用CoffeeScript一样使用它们时,出现错误: class SomeClass extends React.Component { // Instead of this constructor(){ this.handleInputChange = this.handleInputChange.bind(this) } // Can I somehow do this? Am i just getting the syntax wrong? handleInputChange (val) => { console.log('selectionMade: ', val); } 所以,如果我要传递SomeClass.handleInputChange ,例如setTimeout ,它的作用域是类实例,而不是window对象。

当手动刷新或写入时,React-router url不起作用

我正在使用React-router,当我点击链接button时它工作正常,但是当我刷新我的网页时,它不会加载我想要的内容。 例如,我进入localhost / joblist,一切都很好,因为我到达这里按下一个链接。 但是,如果我刷新网页,我得到:无法GET / joblist 默认情况下,它不这样工作。 最初我有我的URL:本地主机/#/和本地主机/#/工作清单,他们工作得很好。 但我不喜欢这种types的url,所以试图擦除'#'我写道: Router.run(routes, Router.HistoryLocation, function (Handler) { React.render(<Handler/>, document.body); }); 这个问题不会发生localhost /,这个总是返回我想要的。 编辑:这个应用程序是单页,所以/ joblist不需要问任何服务器。 编辑2:我的整个路由器。 var routes = ( <Route name="app" path="/" handler={App}> <Route name="joblist" path="/joblist" handler={JobList}/> <DefaultRoute handler={Dashboard}/> <NotFoundRoute handler={NotFound}/> </Route> ); Router.run(routes, Router.HistoryLocation, function (Handler) { React.render(<Handler/>, document.body); });

分配左侧的Javascript对象括号表示({导航} =)

我以前没有看过这个语法,所以想知道这是什么意思。 左边的方括号出现语法错误:“unexpected token {” var { Navigation } = require('react-router'); 我不确定webpackconfiguration的哪个部分正在转换,或者语法的目的是什么。 这是和谐的事情吗? 有人可以启发我吗?

无法访问事件处理程序中的React实例(this)

我在ES6(用BabelJS)写一个简单的组件,并且函数this.setState不起作用。 典型的错误包括像 无法读取未定义的属性“setState” 要么 this.setState不是一个函数 你知道为什么吗? 这里是代码: import React from 'react' class SomeClass extends React.Component { constructor(props) { super(props) this.state = {inputContent: 'startValue'} } sendContent(e) { console.log('sending input content '+React.findDOMNode(React.refs.someref).value) } changeContent(e) { this.setState({inputContent: e.target.value}) } render() { return ( <div> <h4>The input form is here:</h4> Title: <input type="text" ref="someref" value={this.inputContent} onChange={this.changeContent} /> <button onClick={this.sendContent}>Submit</button> […]

以编程方式导航使用反应路由器

我正在开发一个应用程序,我检查用户是否没有loggedin我必须显示登录表单,否则发送一个动作,将改变路线和加载其他组件。这里是我的代码: render() { if (isLoggedIn) { // dispatch an action to change the route } // return login component <Login /> } 我怎么能做到这一点,因为我不能改变渲染功能的状态。