Update-Status, wenn Daten in React + Redux geändert

Question

Ich bin zu neu, um zu reagieren. Ich bin neugierig auf ein paar Dinge. Das erste Thema habe ich mich gefragt, warum die HTML-Tags in js?

Ich muss ein Projekt machen. Ich habe eine Methode, die JSON mit .NET zurückgibt Ich habe einen Code wie unten. Wie aktualisiere ich das Div, wenn ich etwas hinzufüge?

Dieser .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); 
} 

Und, js (reagieren) 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') 
); 

Das funktioniert gut, aber fügen Sie nicht hinzu. Ich frage mich, ob dies die richtige Methode ist?

Vielen Dank an alle, die Interesse gezeigt haben.

Answer 1

Wenn Sie Artikel zu api hinzufügen möchten, können Sie so etwas wie dies nennen:

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: Jetzt verstand ich die Frage, Code, den Sie so etwas wie dies aussehen wird, auch Sie werden muss Backend-Code beheben, um nur den Skill-Namen zu erhalten, und dann das Objekt erstellen (Sie können kein C# -Objekt in Javascript erstellen)