在嵌套对象中反应 handleChange 推送值

Question

我有一个将数据推送到 props 的 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});
};

在嵌套对象中反应 handleChange 推送值

React handleChange push values in nested object

input

onchange

reactjs

react-props