努力在样式对象上使用扩展运算符。我试图保留多个属性，但无法弄清楚如何干净利落地这样做

Question

经典的待办事项列表项目。当我点击它以及悬停 on/off 时，我试图更新我的列表项的状态。当状态发生变化时，我正在努力保留我以前的所有属性。到目前为止，唯一的解决办法是在每个函数中指定每个属性并在我不希望它改变时给它 prevValue 。在我下面的代码中，我将此修复与我的删除线 textDecoration 一起使用来说明它何时起作用，但没有将它用于 fontStyle 和不透明度以查看当我不指定它或尝试替代方法时会发生什么。

我想有更好的方法可以做到这一点，但我很难将其描述得足够好以在网上找到一个好的答案。我认为这与传播运算符有关，但到目前为止我没有任何反应。感谢您的帮助！

import React, { useState } from "react";
 
function ToDoItem(props) {
  const [textStrike, setStrikeState] = useState(false);
 
  const [textStyle, setTextStyle] = useState({
    key: 0,
    textDecoration: "none",
    fontStyle: "normal",
    opacity: "1"
  });
 
 
 function handleClick(prevValue) {
   
    if (textStrike === false) {
      setTextStyle({  
        textDecoration: "line-through",
        fontStyle: "italic",
        opacity: "0.4"
      })} 
    else {
      setTextStyle({
        textDecoration: "none",
        fontStyle: "normal",
        opacity: "1"
      })}
 
    setStrikeState(prevValue => !prevValue);
    console.log("textStrike boolean value is " + textStrike);
  } 
 
 
 function hoverOnHandle(prevValue) {
   setTextStyle({
     textDecoration: prevValue,
     textShadow: "1px 1px lightgray"
   });
 }
 
 function hoverOffHandle(prevValue) {
   setTextStyle({
     textDecoration: prevValue,
     textShadow: ""
   });
 }
 
 
 return (
   <li
     onClick={handleClick} 
     onMouseOver={hoverOnHandle}
     onMouseOut={hoverOffHandle}
     style={textStyle}
   >
     {props.text}
   </li>
  );
 }
 
export default ToDoItem;

Answer 1

你可以这样做：

setTextStyle({
    ...textStyle,
    key_we_wish_to_change:new value
      })

传播运算符会将键值对一对一地移动到新对象，但由于您只覆盖了一个值，因此所有其他值都保持不变。

Answer 2

如果您只想更新或添加某些属性，可以使用

setTextStyle({ 
  ...textStyle,
  yourProperty: yourValue
})

例如，如果你只想更新fontFamily，你可以

setTextStyle({ 
      ...textStyle,
      fontFamily: 'Roboto'
    });

努力在样式对象上使用扩展运算符。我试图保留多个属性，但无法弄清楚如何干净利落地这样做

Struggling to use the spread operator on style objects. I'm trying to retain multiple properties but can't figure out how to do so cleanly

reactjs

react-native

react-state-management

react-state