我一直在尝试为 Netlify CMS 创建一个自定义小部件,以允许插入键值对。但是有一些事情出了问题,我认为它们可能是相关的,所以我提出了一个关于它们的问题。
这是我的第一个自定义小部件,我主要基于官方教程:https ://www.netlifycms.org/docs/custom-widgets/
我使用 aMap
作为值,但是当我向地图添加一个新元素,然后调用onChange(value)
回调时,似乎什么也没发生。但是,如果我将其更改为onChange(new Map(value))
它确实会更新。onChange
回调似乎需要一个新对象?
其次,该值似乎并没有真正被保存。当我填写其他小部件并刷新页面时,它会要求恢复以前的值。但是它不会恢复地图,而恢复其他值就好了。
最后,我得到了未捕获的异常:在我对地图进行任何更改后的一秒钟内,对象就出现了。我的猜测是 Netlify CMS 正在尝试保存地图(将其反跳一秒钟,因此它不会保存我输入的每个字母),但失败并抛出该异常。这可以解释前一个问题(非储蓄问题)。
我目前的自定义小部件的完整代码是:
var IngredientsControl = createClass({
getDefaultProps: function () {
return {
value: new Map()
};
},
addElement: function (e) {
var value = this.props.value;
value.set("id", "Description");
//is.props.onChange(value);
this.props.onChange(new Map(value));
},
handleIdChange: function (oldId, newId) {
console.log(oldId, newId);
var value = this.props.value;
var description = value.get(oldId);
value.delete(oldId);
value.set(newId, description);
//this.props.onChange(value);
this.props.onChange(new Map(value));
},
handleDescriptionChange: function (id, description) {
console.log(id, description);
var value = this.props.value;
value.set(id.toLowerCase(), description);
//this.props.onChange(value);
this.props.onChange(new Map(value));
},
render: function () {
var value = this.props.value;
var handleIdChange = this.handleIdChange;
var handleDescriptionChange = this.handleDescriptionChange;
var items = [];
for (var [id, description] of value) {
var li = h('li', {},
h('input', { type: 'text', value: id, onChange: function (e) { handleIdChange(id, e.target.value); } }),
h('input', { type: 'text', value: description, onChange: function (e) { handleDescriptionChange(id, e.target.value); } })
);
items.push(li);
}
return h('div', { className: this.props.classNameWrapper },
h('input', {
type: 'button',
value: "Add element",
onClick: this.addElement
}),
h('ul', {}, items)
)
}
});
var IngredientsPreview = createClass({
render: function () {
var value = this.props.value;
var items = [];
for (var [id, description] of value) {
var li = h('li', {},
h('span', {}, id),
h('span', {}, ": "),
h('span', {}, description)
);
items.push(li);
}
return h('ul', {}, items);
}
});
CMS.registerWidget('ingredients', IngredientsControl, IngredientsPreview);
我究竟做错了什么?
谢谢!