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
Post a Comment