Question

来自Angular，了解范围以及指令/控制器与HTML的交互方式与我尝试做的这个简单示例相比似乎相当合理。

基本上，我有一些组件。

/** @jsx React.DOM */
var React = require('react');
var {TextInput} = require("./controls/TextInput.jsx");

var Group = React.createClass({
    render: function () {      
        console.log(this.props.formdata); // passed from parent
        return (
                 <fieldset className="">
                    <legend>My Field Group</legend>
                     {this.props.field.fields.map(function(fld, i) {                           
                     return (<div className="my-field">
                                <TextInput formdata={formdata} field={fld} />
                            </div>);
                 })}
             </fieldset>
        );
    }
});

exports.Group = Group;

我的TextInput看起来像这样：

** @jsx React.DOM */
var React = require('react');

var TextInput = React.createClass({
    render: function () {

       return (
         <div className="form-group">
           <label htmlFor={this._reactInternalInstance._rootNodeID+'_input'}>{this.props.field.label}</label>
           <input type="" className="form-control" id={this._reactInternalInstance._rootNodeID+'_input'} value={???} placeholder=""/>
         </div>
        );
    }
});

exports.TextInput = TextInput;

首先，我非常确定我对_rootNodeId所做的事情可能会更好，但是没有找到更好的例子。

我的主要问题是如何将文本框的值绑定到我的模型。

我是＆＃34;使用＆＃34;通量也是，并且有一个

var SomeStore = require('../stores/some-store');

和

var SomeActions = require('../actions/some-action');

我可以用来管理数据和调度事件的对象。基本上，我需要发生的是当一个子文本输入中的值发生变化时，我想处理更改，可能更改模型中的其他一些值并告诉受影响的控件/ dom元素自行更新。

欢迎任何建议。

由于萨姆

Answer 1

我假设你想在不提交实际提交输入的情况下这样做。在React / Flux中，商店是您最接近＆＃34;型号＆＃34;的商店。您需要构建Flux架构，以便您的React组件正在侦听对商店的更改。例如，在您的TextInput组件中，我假设您不想实际提交数据（只需在输入后立即更新信息）：

** @jsx React.DOM */
var React = require('react');
var SomeActions = require('../actions/some-action');

var TextInput = React.createClass({

    handleChange: function () {
        var generatedRef = this._reactInternalInstance._rootNodeID+'_input';
        var data = React.findDOMNode(this.refs[generatedRef]).value;
        SomeActions.UpdateStore(data);
    },

    render: function () {
        var generatedRef = this._reactInternalInstance._rootNodeID+'_input';

        return (
            <div className="form-group">
                <label htmlFor={this._reactInternalInstance._rootNodeID+'_input'}>{this.props.field.label}</label>
                <input type="text" ref={generatedRef} onChange={this.handleChange} className="form-control" id={this._reactInternalInstance._rootNodeID+'_input'} placeholder=""/>
            </div>
        );
    }
});

exports.TextInput = TextInput;

声明generatedRef并非必要，但我是为了清楚起见而做的。在SomeActions中，您需要通过调度程序调度有效负载。 SomeStore需要侦听该类型的有效负载并相应地更新其数据，然后发出其他组件正在侦听的更改。例如：

/** @jsx React.DOM */
var React = require('react');
var {TextInput} = require("./controls/TextInput.jsx");
var SomeStore = require('../stores/some-store');


var getData = function () {
    return SomeStore.retrieveData(); //should return an object 
};

var Group = React.createClass({
    onChange: {
    this.setState(getData());
    },

    componentDidMount: {
        SomeStore.addChangeListener(this.onChange);
    },

    componentWillUnmount: {
        SomeStore.removeChangeListener(this.onChange);
    },
    render: function () {      
        console.log(this.props.formdata); // passed from parent
        return (
            <fieldset className="">
                <legend>My Field Group</legend>
                 {this.props.field.fields.map(function(fld, i) {                           
                 return (
                     <div className="my-field">
                         <TextInput formdata={formdata} field={fld} />
                     </div>);
                })}
            </fieldset>
        );
    }
});

exports.Group = Group;

这是我能做的最好的事情，而不知道你的行为和商店是什么样的。基本上，handleChange会在您更改输入字段中的数据时随时调度操作。此操作将更新商店。商店应在任何更新时发出change事件。然后，将相应地更新监听这些更改的任何组件以反映商店的当前数据。

React + Flux - 将嵌套组件绑定到单个＆＃34;模型＆＃34;

1 个答案: