React 事件触发样式更改 小例子

我们可以将某些样式的修改条件写在style行类样式上。

比如我们点击一段文本的时候，让其背景的高度进行变化

import React, { Component } from 'react';

class Header extends Component {
  constructor() {
    super()
    this.state = {
      defaultHeight: true
    }
  }

  changeHeight () {
    this.setState({
      defaultHeight: !this.state.defaultHeight
    })
  }

  render() {
    let styleObj ={
      background: '#ccc',
      height: this.state.defaultHeight ? '50px' : '100px'
    }
    return (
    <div>
      <p style={styleObj} onClick={this.changeHeight.bind(this)}>asdasd</p> 
      </div>
    )
  }
}

比如此处的文本默认高度先给它50px，点击一下它变成100px，再点击变回50px，有一个toggle来回切换的效果

我们可以在定义行类样式的时候，用一个三元运算表达式。

当其中的一个状态变化的时候，取不同的高度值

defaultHeight在constructor()里面需要先定义一下

在点击p标签的时候，对defaultHeight进行取反

注意，下面有个坑

比如定义成false，是这么定义

this.setState({
  defaultHeight: false
})

取反不能这么写

this.setState({
  defaultHeight: !defaultHeight
})

会报错

'defaultHeight' is not defined

下面是正确的写法

this.setState({
  defaultHeight: !this.state.defaultHeight
})

事件触发state的更改，进而导致样式的更改是以上小例子的思想