Обновить определенное свойство атрибута объекта в блоке Wordpress Gutenberg

У меня есть собственный блок Гутенберга с атрибутом:

valuesObj: {
    type: 'object',
    default: {},
}

Я хочу обновить определенное свойство в этом объекте при изменении ввода. Итак, я создал функцию, которая вызывается из onChange компонента:

<TextInput
    value={ valuesObj[index] }
    onChange={ (value) => this.onChangeValue(value, index) }
/>

Это вызываемая функция:

onChangeValue(value, index) {
    var newValuesObj = this.props.attributes.valuesObj;

    newValuesObj[index] = value;

    this.props.setAttributes({ valuesObj: newValuesObj });
};

По какой-то причине это вообще не работает. Когда я набираю TextInput, ничего не меняется. Когда я сохраняю сообщение, для этого атрибута ничего не сохраняется. Я знаю, что функция вызывается правильно и передает правильные value и index (я console.log их). Я просматривал документацию Гутенберга, но, похоже, она ничего не упоминает об этом.

Не уверен, что я упускаю / делаю неправильно.


wordpress-gutenberg gutenberg-blocks
person Phil    schedule 04.06.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы вызываете onChangeURL, но ваш метод называется onChangeValue.

Я не уверен, откуда берется значение index, но попробуйте создать новый объект в вашем onChangeValue и установить этот новый объект для своего атрибута.

Попробуйте изменить свой onChangeValue на что-то вроде:

onChangeValue(value, index) {
    var newValuesObj = {};
    newValuesObj[index] = value;
    this.props.setAttributes({ valuesObj: newValuesObj });
  }
person KT.C    schedule 05.06.2019
comment
Ой. Это была ошибка копирования и вставки из-за моих отчаянных попыток заставить все это работать. Даже с правильным названием метода он все равно не работает. (Я тоже обновил вопрос). - person Phil; 05.06.2019
comment
Это помогло мне указать правильное направление. Это сработало, за исключением того, что все остальные свойства объекта были перезаписаны. Я решил это, клонировав объект (var newValuesObj = JSON.parse(JSON.stringify(this.props.attributes.valuesObj));), а затем внося изменения. Спасибо за вашу помощь! - person Phil; 05.06.2019
comment
Если я понимаю, что вы здесь делаете, я считаю, что оператор спреда - более распространенный и более лаконичный способ сделать то же самое. Что-то вроде setAttributes( { name: { ...object, [key]: value } } ). - person Corey C.; 22.07.2020