在嵌套对象中反应 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 的新对象（浅拷贝）
• 然后你更新这个嵌套对象的 prop 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});
};