Реагировать на push-значения handleChange во вложенном объекте

Question

У меня есть событие handleChange, которое помещает данные в реквизит

handleChange = input => e => {
    let target = e.target,
        type = target.type,
        value = target.value;

    this.setState({ 
        [input]: (type === "checkbox" ? target.checked : value) 
    });
};

на входе, я обработал изменение onChange={onChange('services.cleaning')} Могу ли я в любом случае выдвинуть данные в реквизит как вложенный объект, а не как «services.cleaning»?

Событие onchange

<Checkbox onChange={onChange('services.cleaning')} type='checkbox' name='cleaning' />

Answer 1

Вот одно из возможных решений:

• Сначала необходимо создать новый объект (мелкая копия) размером this.state.services
• Затем вы обновляете опору cleaning этого вложенного объекта
• Наконец, вы обновляете состояние с помощью this.setState({services: nestedObjectCreated})

Вот соответствующий код:

handleChange = propKey => e => {
   const {target} = e;
   const {type, value} = target;
   const newValue = type === "checkbox" ? target.checked : value

   const [firstProp, ...otherProps] = propKey.split('.');

   if (!otherProps.length) {
      return this.setState({[firstProp] newValue});
   }

   const nestedObject = {...this.state[firstProp]};
   otherProps.reduce(
       (acc, val, index) => {
          if (index < otherProps.length - 1) {
             return acc[val];
          }
          acc[val] = newValue;,
       },
       nestedObject
   );

   this.setState({[firstProp]: nestedObject});
};