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

Question

I'm too new to react. I'm curious about a few things. The first topic I was wondering, why the HTML tags in js?

I need to do a project. I have a method that returns json with .NET I have a code like below. How do I update the div when I add something into 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, but do not add. I wonder if this is the correct method?

Thank you to everyone who showed interest.

Answer 1

If you want to add items to api, you can call something like 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: Now i understood the question, you code will look something like this, also you will have to fix backend code to only receive the skill name, and then create the object (you can't create a C# object in javascript)