Javascript 在React中的两个样式对象之间切换

我试图在单击时更改此组件的样式。我还没有让点击处理程序工作（它实际上是从我在上面找到的一些其他代码中提取出来的，所以如果你有关于如何实现这一点的建议，我会接受），因为我不确定点击时在这两种风格之间切换的最佳方式是什么

目前我试图在state中使用“class:open”，并使用style={this.state.class}呈现div。这种方法不起作用，因为DOM甚至没有正确加载。这是可能的（当然是改变了语法），还是另一种方法更好

请不要建议我使用CSS来做这件事，因为我这样做是为了让自己熟悉React，即使从更广泛的意义上说，这不是做这件事的“最佳”方式

class Box extends React.Component {

  constructor(...props) {
    super(...props)
    this.state = {
      hover: false,
      class: open
    }
  }

  mouseOver = () => this.setState({hover: true});
  mouseOut = () => this.setState({hover: false});
  handleClick(e){
    if (e.target.class === 'open'){
      e.target.class = 'closed';
    } else{
      e.target.class = 'open';
    }
  }

  render(){

    const open = {
      margin: 5,
      width: 30,
      height: 30,
      backgroundColor: this.state.hover?"#80ffff":"#00e6e6",
      display: "inline-block",
      textAlign: "center"
    };

    const closed = {
      margin: 5,
      width: 30,
      height: 30,
      backgroundColor: this.state.hover?"#ff4d4d":"#ff0000",
      display: "inline-block",
      textAlign: "center"
    }

    return(
      <div style={this.state.class} onMouseOver={this.mouseOver} onMouseOut={this.mouseOut} onClick={this.handleClick}></div>
    )
  }
}

类框扩展了React.Component{
构造函数（…道具）{
超级（…道具）
此.state={
悬停：错，
班级：公开课
}
}
mouseOver=（）=>this.setState（{hover:true}）；
mouseOut=（）=>this.setState（{hover:false}）；
handleClick（e）{
如果（e.target.class=='open'）{
e、 target.class='关闭'；
}否则{
e、 target.class='open'；
}
}
render（）{
常量打开={
差额：5，
宽度：30，
身高：30，
背景颜色：this.state.hover？”#80ffff:“#00e6e6”，
显示：“内联块”，
textAlign：“居中”
};
常数关闭={
差额：5，
宽度：30，
身高：30，
背景颜色：this.state.hover？”#FF4D:“#ff0000”，
显示：“内联块”，
textAlign：“居中”
}
返回(
)
}
}

我对您的代码进行了一些重构，以向您展示一种工作方法（悬停并单击）：

在这里创建了一个小提琴：

类框扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
悬停：错，
Isoped:错误
}
}
mouseOver=（）=>this.setState（{hover:true}）；
mouseOut=（）=>this.setState（{hover:false}）；
handleClick（e）{
this.setState（{isOpened:！this.state.isOpened}）；
}
render（）{
常量打开={
差额：5，
宽度：90，
身高：30，
背景色：“80ffff”，
显示：“内联块”，
textAlign：“居中”
};
常数关闭={
差额：5，
宽度：90，
身高：30，
背景颜色：“ff0000”，
显示：“内联块”，
textAlign：“居中”
}
返回(
Hover{this.state.Hover？”！“：“？”}
)
}
}

有几点：

1） 您必须

.bind

您的回调函数。从：

（…）在JavaScript中，默认情况下不绑定类方法。如果你忘了 要绑定this.handleClick并将其传递给onClick，将 实际调用函数时未定义

这不是特定的行为；这是如何发挥作用的一部分 在JavaScript中工作。通常，如果您引用的方法没有（） 在它之后，比如onClick={this.handleClick}，您应该绑定它 方法

如果打电话给bind让你烦恼，有两种方法可以解决 这如果您使用的是实验性属性初始值设定项语法， 可以使用属性初始值设定项正确绑定回调：

---

2） 每次调用

.setState

，React都会安排一个新的渲染调用。因此，一般来说，您不必（不应该）自己更改dom（如

e.target.class

）。

您是否尝试过在函数之外声明常量？

class Box extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      hover: false,
      isOpened: false
    }
  }

  mouseOver = () => this.setState({hover: true});
  mouseOut = () => this.setState({hover: false});
  handleClick(e){
     this.setState({isOpened: !this.state.isOpened});
  }

  render(){

    const open = {
      margin: 5,
      width: 90,
      height: 30,
      backgroundColor: "#80ffff",
      display: "inline-block",
      textAlign: "center"
    };

    const closed = {
      margin: 5,
      width: 90,
      height: 30,
      backgroundColor: "#ff0000",
      display: "inline-block",
      textAlign: "center"
    }



    return(
      <div style={ this.state.isOpened ? open : closed } onMouseOver={this.mouseOver.bind(this)} onMouseOut={this.mouseOut.bind(this)} onClick={this.handleClick.bind(this)}>Hover {this.state.hover ? "!" : "?" }</div>
    )
  }
}