我正在创建一个用户可以设计自己的表单的应用程序.例如,指定字段的名称以及应包含哪些其他列的详细信息.
该组件在此处作为JSFiddle提供.
我的初始状态如下:
var DynamicForm = React.createClass({
getInitialState: function() {
var items = {};
items[1] = { name: 'field 1', populate_at: 'web_start',
same_as: 'customer_name',
autocomplete_from: 'customer_name', title: '' };
items[2] = { name: 'field 2', populate_at: 'web_end',
same_as: 'user_name',
autocomplete_from: 'user_name', title: '' };
return { items };
},
render: function() {
var _this = this;
return (
<div>
{ Object.keys(this.state.items).map(function (key) {
var item = _this.state.items[key];
return (
<div>
<PopulateAtCheckboxes this={this}
checked={item.populate_at} id={key}
populate_at={data.populate_at} />
</div>
); …Run Code Online (Sandbox Code Playgroud) 我users在JS对象(不是数组)中有一个索引列表.它是React状态的一部分.
{
1: { id: 1, name: "John" }
2: { id: 2, name: "Jim" }
3: { id: 3, name: "James" }
}
Run Code Online (Sandbox Code Playgroud)
什么是最佳做法:
没有任何不可改变的帮助者.我正在使用Coffeescript和Underscore(所以_.extend没问题......).
谢谢.