Я пытаюсь создать блок Гутенберга, в котором пользователь может ввести несколько пар ключ-значение. Эти пары называются functions
, ключ называется name
, а значение people
.
Следующий пример с жестко запрограммированным массивом работает нормально:
attributes: {
functions: {
type: 'array',
default: [{name:'', people:''}]
}
},
edit({attributes, setAttributes}) {
function updateFunction(event) {
setAttributes({functions: [{name:'Test function', people:'Jack'}]});
}
return (
<table className='credits-table'>
<tr>
<td>
<input type='text' placeholder="Function" value={attributes.functions[0].name} onChange={updateFunction} />
</td>
<td>
<textarea rows='3' placeholder="Names" value={attributes.functions[0].people} onChange={updatePeople} />
</td>
</tr>
</table>
);
}
Атрибуты обновляются, и новый текст отображается внутри поля ввода и текста. Это, однако, должно принимать значение входной функции для фактического обновления, конечно, но это не работает таким образом:
function updateFunction(event) {
let func = attributes.functions;
func[0].name = "Jane";
setAttributes({functions: func});
console.log(attributes);
}
Вывод последней строки показывает ожидаемый результат, но текстовые поля не обновляются и даже снова очищаются:
[{name: "Jane", people: ""}]
Если я использую func[0].name = event.target.value
, результатом атрибутов всегда будет [{name: "e", people: ""}]
, независимо от того, какую букву я набрал. console.log(event.target.value);
, однако, записывает письмо, которое я набрал, как ожидалось.
Так почему это не работает? Есть ли какие-то странные ограничения на сохранение вложенных объектов в Гутенберге, о которых я не знаю?
ОБНОВЛЕНИЕ
Благодаря этому комментарию, я нашел обходной путь, но должен же быть способ получше, не так ли?
function updateFunction(event) {
var func = JSON.parse(JSON.stringify(attributes.functions));
func[0].name = event.target.value;
setAttributes({functions: func});
}