Question

更新事实证明我的整个方法都是错误的。正如公认的答案所示，一个很好的起点是使用React + Flux构建的TodoMVC应用程序并托管在GitHub上。

我正在构建一个非常小的React + Flux应用程序用于学习目的。目前它只包含登录表单和内容（实际上只显示用户名）。我计划将应用程序组件作为我的应用程序中唯一的有状态组件，它将其状态作为道具发送给子项。但我无法弄清楚从孩子那里更新应用程序状态的最佳实践（在我的例子中，输入表单）。我想我可能会在层次结构中冒泡它，但这似乎是一种不好的做法。另外，我应该在商店中保存登录的用户名吗？

这是我的意思的基本例子：

var LoginForm = React.createClass({
    _onSubmit : function(e) {
        e.preventDefault();

        var username = this.refs.username.getDOMNode().value.trim();

        if(!username) return;

        alert(username);

        this.refs.username.getDOMNode().value = "";

        return
    },

    render : function() {
        return (
            <div>
                <form onSubmit={this._onSubmit}>
                    <input
                        type="text"
                        placeholder="Insert username"
                        ref="username"
                    />
                    <button type="submit">Login</button>
                </form>
            </div>
        );
    }
});

var Header = React.createClass({
    render : function() {
        return (
            <div className="header">
                <LoginForm />
            </div>
        );
    }
});

var Content = React.createClass({
    render : function() {
        return (
            <div className="content">Welcome, [username]</div>
        );
    }
});

var MyApp = React.createClass({
    render : function() {
        return (
            <div>
                <Header />
                <Content />
            </div>
        );
    }
});

React.renderComponent(
    <MyApp />,
    document.body
);

我已经使用此示例设置了一个JSFiddle here，我的目标是用警报字符串替换[username]。

Answer 1

我很抱歉，但我没有在你的代码中看到任何flux的架构:)对于高级实现解释，假设你有所有3个基本通量结构，即action，dispatcher，和store。

在_onSubmit组件的LoginForm中，您应该触发action来执行登录，然后该事件将通过dispatcher传递给{{ 1}}。

来自store，它将执行登录（此处保存store信息），然后触发事件（例如[username]）。此活动将由change中的Content组件注册和收听。收听componentDidMount事件后，您应该能够从商店获取change信息。对于通量

，这是good example

在React + Flux中更新子级的应用程序状态

1 个答案: