Question

我正在尝试创建一个可重用的updateComponentHandler，它会根据通过各种输入字段返回的值来更新任何选定组件的状态。

通常，人们会使用这样的东西：

updateComponentHandler = value => {
  this.setState(prevState => {
    let selected = prevState.usedComponents
      .filter(item => item.selected === true)
      .shift();
    selected.backgroundColor = value;
    return { selected};
  });
};

但是，要使其真正可重用，我不能对backgroundColor进行硬编码，因为在某些情况下需要更新其他属性。因此，在我的输入组件中，我将同时返回需要更新的属性和值：

handleChange={color =>
  this.props.updateComponent({ backgroundColor: color.hex })
}

返回例如backgroundColor：“ #CCCCCC”

我的问题是，我无法弄清楚如何将此值插入到setState，其中将使用“ selected.backgroundColor = value;”。从最上面的例子开始。谁能告诉我该怎么做？

Answer 1

我不确定我是否了解您要执行的操作，但是您可以做的一件事是在状态中传递对象的键并执行selected[key] = value。

updateComponentHandler = (key, value) => {
  this.setState(prevState => {
    let selected = prevState.usedComponents
      .filter(item => item.selected === true)
      .shift();
    selected[key] = value;
    return { selected };
  });
};

handleChange={color =>
  this.props.updateComponent('backgroundColor', color.hex)
}

如何动态更新对象的状态？

1 个答案: