从类更改对象值

如何解决从类更改对象值

我有一个处理我的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} from "react";
import {inputBoxInner} from "../css/style.js";

export default class Input extends Component {
  state = {
    borderOpacity: 1,id: ""
  };

  return(
   <div
     className="input"
     onClick={(e) => {
       inputBoxInner.setopacity(this.state.borderOpacity);
       this.setState({id: e.target.className});
     }}
     style={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}}    
  />
);