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

我太新，无法做出反应。我很好奇一些事情。我想知道的第一个主题，为什么js中的HTML标签？在React + Redux中更改数据时的更新状态

我需要做一个项目。我有一个方法返回JSON与.NET 我有一个像下面的代码。如何在添加东西时更新div？

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

而且，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') 
);

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

谢谢大家谁表现出兴趣。

来源

2017-04-06 caras

虽然我认为任何答案都将主要基于意见，但您使用的模式是对React罚款。这不是Redux，因为你没有使用[商店]（http://redux.js.org/docs/api/Store.html）。 –

如果想要添加项目的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＃对象）

来源

2017-04-06 13:12:35 Dennis

调试时出现错误。 Line => updateSkillList意外的令牌（15:20） – caras

看起来像你没有使用ES6，编辑上面的代码 – Dennis

谢谢，但它是不正确的，以一定的时间间隔去服务器。我需要访问HTML更新功能。像 <按钮的onclick =“saveAndUpdate（）”>添加新 – caras

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

回答

相关问题