Javascript 从类更改对象值

我有一个处理css的js文件，我试图更改对象的值，但值保持不变

let inputBoxInner = {
  width: "80%",
  marginTop: 5,
  alignItems: "center",
  color: "#397185",
  cursor: "text",
  height: 36,
  border: "1px solid #80cfc6",
  visibility: "visible",
  opacity: 0.2,
  setOpacity: function (e) {
    this.opacity = e
  };
};

module.exports = {
  inputBoxInner
};

import React，{Component}来自“React”；
从“./css/style.js”导入{inputBoxInner}；
导出默认类输入扩展组件{
状态={
边界不透明度：1，
id:“
};
返回(
{
inputBoxInner.setOpacity（this.state.borderOpacity）；
this.setState（{id:e.target.className}）；
}}
样式={inputBoxInner}
/>
);
};

我假设“this.opacity”只是返回一个引用，而不是修改实际对象，我不确定如何使这个对象可变

---

如何更改此值？

您应该在状态中保存单击的状态，并根据该状态设置不透明度

state = {
  borderOpacity: 1,     
  id: "",     
  isClicked: false   
}; 
   
return(
  <div 
  className="input"  
  onClick={(e) => { this.setState({id: e.target.className, isClicked: true });  }}      
  style={{...inputBoxInner, opacity: this.state.isClicked ? 
  this.state.borderOpacity : inputBoxInner.opacity}}    
  />
);

状态={
边界不透明度：1，
id:“”，
isClicked:错误
}; 
返回(
{this.setState（{id:e.target.className，isClicked:true}）；}
style={{…inputBoxInner，不透明度：this.state.isClicked？
this.state.borderOpacity:inputBoxInner.opacity}
/>
);

您应该在状态中保存单击的状态，并根据该状态设置不透明度

state = {
  borderOpacity: 1,     
  id: "",     
  isClicked: false   
}; 
   
return(
  <div 
  className="input"  
  onClick={(e) => { this.setState({id: e.target.className, isClicked: true });  }}      
  style={{...inputBoxInner, opacity: this.state.isClicked ? 
  this.state.borderOpacity : inputBoxInner.opacity}}    
  />
);

状态={
边界不透明度：1，
id:“”，
isClicked:错误
}; 
返回(
{this.setState（{id:e.target.className，isClicked:true}）；}
style={{…inputBoxInner，不透明度：this.state.isClicked？
this.state.borderOpacity:inputBoxInner.opacity}
/>
);

我认为您需要添加一个构造函数来定义状态，您需要通过说

this.state=

not

state=

来定义状态，我不知道为什么它不起作用，但是如果您将

setOpacity

函数更改为

setOpacity:function（e）{inputBoxInner={…inputBoxInner，opacity:e}；}

它应该可以工作，但我认为这种方法有问题，为什么要对它进行变异？@BesoKakulia它主要是为了重构。单击框将高亮显示该框，单击其他位置将取消高亮显示该框。我将其移动到“css”JS文件中，而不是为类的样式设置一个大的文本墙，但是仍然需要修改值以实现所提到的操作。我在类中有一个highlight函数，它改变了

this.state.borderOpacity

我相信你需要添加一个构造函数来定义state，你需要通过说

this.state=

not

state=

来定义state，我不知道为什么它不起作用，但是如果您将

setOpacity

函数更改为

setOpacity:function（e）{inputBoxInner={…inputBoxInner，opacity:e}；}

应该可以，但我认为这种方法有问题，为什么要对其进行变异？@BesoKakulia这主要是为了重构。单击框将高亮显示该框，单击其他位置将取消高亮显示该框。我将其移动到“css”JS文件中，而不是为类的样式设置一个大的文本墙，但是仍然需要修改值以实现所提到的操作。我在类中有一个highlight函数，它可以更改

this.state.borderOpacity

添加

style={{……inputBoxInner，opacity:this.state.borderOpacity}}

与我的highlight/isClicked函数完美配合。我甚至不需要在JS文件中添加或改变不透明度。谢谢，先生。添加

style={{……inputBoxInner，不透明性：this.state.borderOpacity}}

与我的highlight/isClicked函数完美配合。我甚至不需要在JS文件中添加或改变不透明度。谢谢你，先生。