标签: reactjs-flux

如何使用react.js中的Enter键提交表单?

这是我的表单和onClick方法.我想在按下键盘的Enter按钮时执行此方法.怎么样 ?

注意:没有赞赏jquery.

 comment: function (e) {
        e.preventDefault();
        this.props.comment({comment: this.refs.text.getDOMNode().value, userPostId:this.refs.userPostId.getDOMNode().value})
    },


 <form className="commentForm">
     <textarea rows="2" cols="110" placeholder="****Comment Here****" ref="text"  /><br />
    <input type="text" placeholder="userPostId" ref="userPostId" /> <br />
     <button type="button" className="btn btn-success" onClick={this.comment}>Comment</button>
    </form>
Run Code Online (Sandbox Code Playgroud)

reactjs reactjs-flux

81
推荐指数
4
解决办法
7万
查看次数

如何切换反应组件的布尔状态?

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

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

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

   this.state = {
      check: false
   };
};
Run Code Online (Sandbox Code Playgroud)

我试图在每次单击我的复选框时使用this.setState方法切换状态:

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

当然,我得到一个未捕获的ReferenceError:未定义检查.那我该怎么做呢?

提前谢谢了.

javascript reactjs reactjs-flux

55
推荐指数
4
解决办法
10万
查看次数

redux,react-redux,redux-thunk之间有什么区别?

我正在使用React + Flux.我们的团队正计划从通量转向redux.Redux对于我来自flux world来说非常困惑.在磁通控制流程中,组件 - >操作 - >存储和存储更新返回组件简单.它简单而且非常清晰.

但在redux中它令人困惑.这里没有商店,是的,有些例子没有使用商店.我经历了几个教程,似乎每个人都有自己的实现风格.有些人正在使用容器,有些人则没有.(我不知道这个容器概念,也无法理解mapStatePtoProps所做的mapStateToProps).

  1. 有人可以清楚地解释如何在redux中控制流程吗?
  2. redux中组件/容器/操作/操作创建者/存储的角色是什么?
  3. redux/react-redux/redux-thunk /任何其他的区别?
  4. 如果您可以发布任何简单而精确的 redux教程的链接,将会非常有用.

javascript reactjs reactjs-flux redux react-redux

52
推荐指数
3
解决办法
2万
查看次数

使用react-router登录后自动重定向

我想在我的react/react-router/flux应用程序中建立一个Facebook登录.我在登录事件中注册了一个监听器,'/dashboard'如果他们已登录,则希望将用户重定向到.我该怎么做?location.push除了完全重新加载页面后,效果不佳.

reactjs reactjs-flux react-router

48
推荐指数
3
解决办法
7万
查看次数

输入Reactjs的预期相应JSX结束标记

在Reactjs中创建具有输入字段的组件时会发生错误 Error: Parse Error: Line 47: Expected corresponding JSX closing tag for input at http://localhost/chat-react/src/script.js:47:20 </div>

var Main = React.createClass({
    render: function() {
        return (
            <div className="card-action">
                <i class="mdi-action-account-circle prefix"></i>
                <input id="icon_prefix" type="text" class="validate">
            </div>
        );
    }
});
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-jsx reactjs-flux

45
推荐指数
3
解决办法
6万
查看次数

ReactJS findDOMNode和getDOMNode不是函数

我正在使用ReactJS和Flux构建一个Web应用程序,我正在尝试使用findDOMNode方法获取当前div的节点,我 得到下一个错误:

Uncaught TypeError: React.findDOMNode is not a function
Run Code Online (Sandbox Code Playgroud)

所以,我尝试使用getDOMNode,我得到了同样的错误:

Uncaught TypeError: React.getDOMNode is not a function
Run Code Online (Sandbox Code Playgroud)

我正在使用npm构建JS,我使用这些方法的代码:

var React = require('react');
var stores = require('../stores');
var MessagesUserContainer = require('./messageusercontainer');
var ChatStore = stores.ChatStore;
var owner = stores.getOwner();

var MessagesList = React.createClass({

    getInitialState: function(){
        return {'muc': []};
    },
    componentDidUpdate: function(){
        var node = React.findDOMNode(this); //Error here
        node.scrollTop = node.scrollHeight;
    },
    render: function(){
        return (
                <div className="chatScroll">
                    {this.state.muc}
                </div>
            )
    }
});

module.exports = MessagesList; …
Run Code Online (Sandbox Code Playgroud)

javascript flux reactjs reactjs-flux

45
推荐指数
1
解决办法
3万
查看次数

Redux:关于如何进行后端持久化的意见/示例?

我想知道使用Redux的人们是如何接近他们的后端持久性的.特别是,您是将"操作"存储在数据库中还是仅存储应用程序的最后已知状态?

如果要存储操作,是否只是从服务器请求它们,然后在给定页面加载时重放所有这些操作?这可能导致一些大型应用程序存在大量行为的性能问题吗?

如果您只存储"当前状态",那么在客户端执行操作时,您在任何给定时间实际上是如何持久保持此状态的?

有没有人有一些代码示例,说明他们如何将redux reducer连接到后端存储api?

我知道这是一个非常"取决于你的应用程序"类型的问题,但我只是在思考一些想法,并试图了解这种"无状态"架构如何在全栈意义上工作.

感谢大家.

reactjs reactjs-flux redux-framework redux

44
推荐指数
1
解决办法
1万
查看次数

如何构建Redux组件/容器

我正在使用redux而且我不确定如何组织我的组件,我认为最好将它们保存在文件夹中,主要组件的名称作为文件夹的名称和内部的所有内部组件:

components
  Common/   things like links, header titles, etc
  Form/     buttons, inputs, etc
  Player/   all small components forming the player
    index.js  this one is the top layout component
    playBtn.js
    artistName.js
    songName.js
  Episode/  another component

然后,在容器文件夹中,我每页只有一个容器,这是我实际连接到Redux的唯一容器:

containers/
  HomePageApp.js
  EpisodePageApp.js
  ...

然后每个顶部组件的操作是一个,而不是每页一个,所以在我连接到Redux的页面容器中,我传递了该页面中使用的组件的所有操作.例如:

actions/
  Player.js
  Episode.js
  ...

我这样做了吗?我没有找到关于谷歌搜索的很多信息,我发现我认为它们仅限于小项目.

谢谢!

javascript reactjs reactjs-flux redux

43
推荐指数
2
解决办法
2万
查看次数

在Flux架构中,您如何管理客户端路由/ URL状态?

作为商店生命周期问题的后续跟进,

在典型的Web应用程序中,通过URL可以获得当前应用程序状态的快捷方式,这样您就可以重新访问该状态并使用前进和后退按钮在状态之间移动.

使用Flux,我们希望所有操作都通过调度程序,我想这也包括URL更改.如何在flux应用程序中管理URL更改?

reactjs reactjs-flux

42
推荐指数
1
解决办法
9561
查看次数

何时使用带有Immutable.js和Flux的.toJS()?

我正在尝试将ImmutableJS与我的React/Flux应用程序一起使用.

我的商店是Immutable.Map物品.

我想知道我应该在哪个方面使用.toJS()?应该是商店的.get(id)回归吗?或在组件中.get('member')

reactjs reactjs-flux immutable.js

42
推荐指数
3
解决办法
3万
查看次数