Question

我试图在点击时更改此组件的样式。我还没有让点击处理程序正常工作（它实际上只是从我在SO上找到的其他代码中解除了，所以如果你有关于如何实现我的建议的话，那我就是接受），因为我不确定在点击这两种风格之间切换的最佳方式是什么。

目前我尝试使用＆＃34; class：open＆＃34;在州内，并使用style = {this.state.class}渲染div。这种方法不起作用，因为DOM甚至无法正确加载。这是可能的（当然是改变了语法），还是更好的另一种方法？

请不要建议我使用CSS来做这件事，因为我这样做是为了让自己熟悉React，即使它不是＆＃34;最好＆＃ 34;从广义上讲这样做的方法。

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>
    )
  }
}

Answer 1

我重构了一些代码，向您展示了一种工作方法（悬停并点击）：

在这里创建了一个小提琴：https://jsfiddle.net/mrlew/wt2Ld9rn/

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>
    )
  }
}

有些观点：

1）您必须.bind您的回调功能。来自React docs：

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

这不是特定于React的行为;它是功能的一部分   在JavaScript中工作。通常，如果你引用一个没有（）的方法   在它之后，例如onClick = {this.handleClick}，你应该绑定它   方法

如果调用bind会让你烦恼，有两种方法可以解决   这个。如果您使用的是实验属性初始化程序语法，   您可以使用属性初始值设定项来正确绑定回调：

2）每次调用.setState时，React都会安排一个新的渲染调用。所以，一般来说，你不必（不应该）自己改变dom（比如e.target.class）。

在React

1 个答案: