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＃对象）

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

1 个答案: