React+Redux 中数据更改时更新状态

Question

我太新了，无法做出反应。我对一些事情感到好奇。我想的第一个话题，为什么js里有html标签？

我需要做一个项目。我有一个用.NET返回json的方法 我有如下代码。添加内容时如何更新 div？

这个 .net 代码。

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

还有，js（反应）代码。

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')
);

这很好用，但不要添加。 我想知道这是否是正确的方法？

感谢所有感兴趣的人。

Answer 1

如果你想向 api 添加项目，你可以这样调用：

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>
    ) 
  }
}) 

---

编辑： 现在我明白了这个问题，您的代码看起来像这样，您还必须修复后端代码以仅接收技能名称，然后创建对象（您不能在 javascript 中创建 C# 对象）