javascript - ReactJS data flow with deep hierarchical data -

-

i'm exploring reactjs , trying grasp of core concepts. started piecing prototype of application working on has following hierarchy of

  • customer
    • locations
      • addresses
      • contacts

the page working on input form customer , of related children. each of these sections have text inputs house data, seemed natural place house hierarchy of components.

from have read reactjs, if going manage state, should in common ancestor of controls. means changes in child should bubble event keeper of state handle changes. should update state , changes re-rendered. makes sense in simple scenarios, brings me more complicated hierarchy.

  • if change happens down in 1 of many addresses, supposed bubble event location customer?
  • if so, best way tell state specific address changed?
  • if have call through each level of hierarchy, wouldn't make lot of boilerplate propagate simple change?
  • should attaching onchange event on each text box, or should wait until submit form gather data?

react talks reactlink (https://facebook.github.io/react/docs/two-way-binding-helpers.html) way manage more complex data binding, doesn't give great example of how manage larger hierarchy. also, states application shouldn't need this. well, application isn't complicated, couple nested controls shared state. react supposed shine, wouldn't think jump edge case solutions.

i faced same puzzle - react docs not complete in area. 1 way found work:

var parent = react.createclass({     mixins: [react.addons.linkedstatemixin],      getinitialstate: function() {         return {             p: 'hello world',             q: 'click me if i\'m pink!',             r: 'a'         };     },     render: function() {         return (             <div classname='parent'>                 <p>                     <h3>parent</h3>                     <tt>                         p: {this.state.p}<br />                         q: {this.state.q}<br />                         r: {this.state.r}                     </tt>                 </p>                  <child q = {this.linkstate('q')}                        p = {this.linkstate('p')}                        r = {this.linkstate('r')} />             </div>         );     } }); var child = react.createclass({     clicked: function() {         this.props.q.requestchange("thank :)");     },     render: function() {         return (             <div classname='child'>                 <h3>child</h3>                  <p>                     <input valuelink={this.props.p} />                 </p>                  <p>                     <tt onclick={this.clicked}>                         {this.props.q.value}                     </tt>                 </p>                  <select valuelink={this.props.r}>                     <option value={'a'}>a</option>                     <option value={'b'}>b</option>                 </select>             </div>         );     } });  react.render(<parent />, document.body)

https://jsfiddle.net/cachvico/p81s75x5/

if has improvements i'd glad hear them!


Comments

Post a Comment

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

-
i had following code works fine on localhost: $document = new domdocument(); $document->loadhtml($p_result); $form = $document->getelementsbytagname('form')->item(0); // code continues using $form variable after same code updated on outside server, loadhtml() failed , issued warning. warning: domdocument::loadhtml() expects parameter 1 valid path, string given in path/name/to/script.php returned null instead of object code pretty gets fatal error. note contents of $p_result absolutely same on outside server , on localhost. but why displays kind of warning , why not work? doesn't loadhtml() expects argument 1 string in first place? why method expects parameter 1 valid path ? just make clear i'm not calling loadhtmlfile() , i'm calling loadhtml() . thanks. you're affected one of php bugs . issue present in php 5.6.8 , 5.6.9. have affected php version on server, , bug-free version on localhost. the bug forbids null
Read more

python - How to create jsonb index using GIN on SQLAlchemy? -

-
here's current code creating index jsonb. index("mytable_data_idx_id_key", mytable.data['id'].astext, postgresql_using='gin') but got error. sqlalchemy.exc.programmingerror: (psycopg2.programmingerror) data type text has no default operator class access method "gin" hint: must specify operator class index or define default operator class data type. [sql: "create index event_data_idx_id_key on event using gin ((data ->> 'id'))"] is there way create index on sqlalchemy? the postgresql specific sqlalchemy docs @ http://docs.sqlalchemy.org/en/latest/dialects/postgresql.html#operator-classes mention postgresql_ops dictionary provide "operator class" used postgresql, , provide example illustrating use: index('my_index', my_table.c.id, my_table.c.data, postgresql_ops={ 'data': 'text_pattern_ops',
Read more

c# - TransactionScope not rolling back although no complete() is called -

-
i'm using transactionscope rollback transaction fail bool errorreported = false; action<importerrorlog> newerrorcallback = e => { errorreported = true; errorcallback(e); }; using (var transaction = new transactionscope()) { foreach (importtaskdefinition task in taskdefinition) { loader.load(streamfile, newerrorcallback, task.destinationtable, processingtaskid); } if (!errorreported) transaction.complete(); } i'm sure there no transactionscope started ahead or after code. i'm using entity framework insert in db. regardless state of errorreported transaction never rolled in case of error. what missing ? transactionscope sets transaction.current . that's does. wants transacted must @ property. i believe ef each time connection opened reason. probably, connection open when scope installed. open connection inside of scope or enlist manually. ef has nasty "design decision": default opens
Read more