javascript - Update state when data changed in React+Redux -


i'm new react. i'm curious few things. first topic wondering, why html tags in js?

i need project. have method returns json .net have code below. how update div when add it?

this .net code.

private static readonly ilist<mock.model.skills> _skills;   [route("api/skills/add")] [httppost] public actionresult skills(mock.model.skills model) {    if (modelstate.isvalid)    {     _skills.add(model);      return json("true");    }    return json(false); } 

and, js (react) code.

var rows = react.createclass({     render: function () {         return (             <span classname="label label-info tags">{this.props.item.tag}</span>         );     } });  var skillsrow = react.createclass({     getinitialstate: function () {         return {             items: []         }     },     componentdidmount: function () {          $.get(this.props.dataurl, function (data) {             if (this.ismounted()) {                 this.setstate({                     items: data                 });             }         }.bind(this));     },     render: function () {         var rows = [];         this.state.items.foreach(function (item, index) {             rows.push(<rows class="label label-info tags" key={index} item={item} />);         });         return (<span>{rows}</span>);     } }); reactdom.render(     <skillsrow dataurl="/api/skills" />,     document.getelementbyid('skills-data') ); 

this works well, not add. wonder if correct method?

thank showed interest.

if want add items api, can call this:

var skillsrow = react.createclass({   getinitialstate: function() {     return {       items: [],       currenteditor: ''     }   },   componentdidmount: function() {     this.updateskilllist()   },   updateskilllist: function() {     $.get(this.props.dataurl, function(data) {       this.setstate({         items: data       })     }).bind(this)   },   handleeditorchange: function(event) {     this.setstate({       currenteditor: event.target.value     })   },   handlepostform: function() {     $.post('api/skills/add', {skill: this.state.currenteditor}, function(data) {       this.updateskilllist()     })   },   renderskilllist: function() {     this.state.items.map(function(item, idx) {       return <row classname="label label-info tags" key={idx} item={item} />     })   },   render: function() {     return (       <div>         <span>           <input value={this.state.currenteditor} onchange={this.handleeditorchange} />           <button onclick={this.handlepostform} />         </span>         <span>{this.renderskilllist()}</span>       </div>     )    } })  

edited: understood question, code this, have fix backend code receive skill name, , create object (you can't create c# object in javascript)


Comments

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

openid - Okta: Failed to get authorization code through API call -

ios - Change Storyboard View using Seague -