在调用useState时更新按钮样式。如何将对象的变量转换为字符串？ [英] update of a buttons style on call of useState. how to convert variable of an object to string?

问题描述

我要在每次单击时更新按钮的样式。

我不能使用TRUE/FALSE来更改状态，因为在查询2中有相似值的对象..因此，无论何时点击一个，这两个都会更改样式

当前单击按钮时，除了控制台中的useEffect输出正确的值外，没有其他操作。

在const onClick中似乎存在此问题，它以字符串形式返回值： 对象{thisVal："；40"；，thisIndex："；0"；}
对象{thisVal：40"；，thisIndex：0}

也许你能给我一些建议？

          ...

  const [thisButtomSelected, setThisButtomSelected] = useState({
    thisVal: 0,
    thisIndex: 0,
  })
   const onClick = e => {  
    setThisButtomSelected({ thisVal: e.currentTarget.value, thisIndex: e.currentTarget.id });
  }

  useEffect(() => {
    console.log(thisButtomSelected)
  }, [thisButtomSelected])

       ...

  <li id="list" key={item.id}>
    <button
      value={item.value}
      id={index}
      className={isEqual(thisButtomSelected, { thisVal: item.value, thisIndex: index }) 
        ? 'button-selected' : 'button'
      }
      onClick={onClick}
    >
      {console.log(thisButtomSelected)}
      {console.log({ thisVal: item.value, thisIndex: index })}
      {item.displayValue}
    </button>
</li>
    ...

从useQuery(Apollo客户端)获取{item.value}、{index}等，并使用MAP

推荐答案

给您：

const onClick = e => {  
    setThisButtomSelected({ thisVal: parseInt(e.currentTarget.value), thisIndex: e.currentTarget.id });
  }

这篇关于在调用useState时更新按钮样式。如何将对象的变量转换为字符串？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！