React + Flux - Связывание вложенных компонентов с входами в одну «модель»

Question

Исходя из угловых, понимающих областей и того, как директивы/контроллеры взаимодействуют с 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 может быть лучше, но не нашли лучшие примеры.

Моя основная проблема заключается в том, как связать значение текстового поля с моей моделью.

Я "с помощью" Flux тоже, и есть

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

и

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

объект, который можно использовать для управления данными и диспетчеризации событий. По сути, мне нужно, чтобы произойти, когда значение изменяется в одном из дочерних текстовых входов, я хочу обработать изменение, возможно изменить некоторые другие значения в модели и сообщить элементам управления/dom, чтобы обновить себя.

Любые советы приветствуются.

Благодаря Сэм

Answer 1

Я предполагаю, что вы хотите сделать это без представления фактически подачи входного сигнала. В React/Flux магазины - это самое близкое, что вы доберетесь до «модели». Вам нужно будет построить свою архитектуру 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 в любое время, когда он обновляется. Затем любой компонент, который прослушивает эти изменения, будет обновлен соответствующим образом, чтобы отразить текущие данные магазина.