2018-07-30 汉得日记

React的事件监听

这些 on* 的事件监听只能用在普通的 HTML 的标签上，而不能用在组件标签上。

事件监听函数会被自动传入一个 event 对象，这个对象和普通的浏览器 event 对象所包含的方法和属性都基本一致

class Title extends Component {
handleClickOnTitle (e) {
    console.log(e.target.innerHTML)
}

render () {
    return (
    <h1 onClick={this.handleClickOnTitle}>React 小书</h1>
    )
}
}

setState设置状态

注意，当我们要改变组件的状态的时候，不能直接用 this.state = xxx 这种方式来修改，如果这样做 React.js 就没办法知道你修改了组件的状态，它也就没有办法更新页面。所以，一定要使用 React.js 提供的 setState 方法，它接受一个对象或者函数作为参数。

...
constructor (props) {
    super(props)
    this.state = {
    name: 'Tomy',
    isLiked: false
    }
}

handleClickOnLikeButton () {
    this.setState({
    isLiked: !this.state.isLiked
    })
}
...

因为点击的时候我们并不需要修改 name，所以只需要传入 isLiked 就行了。Tomy 还是那个 Tomy，而 isLiked 已经不是那个 isLiked 了。

上述react的自我练习

题目1：

有一只狗，不允许别人摸它，一旦摸它就会叫，然后就跑了。

完成 Dog 组件，当用户点击的时候会执行自身的 bark 和 run 方法。

分析：使用简单的react里的事件对象即可解决：

class Dog extends Component {
bark () {
console.log('bark')
}

run () {
console.log('run')
}

handleClick(){
this.run()
this.bark()
}

render () {
return (<div onClick={this.handleClick.bind(this)}>DOG</div>)
}
}

题目2：

有一只狗，不允许别人摸它，一旦摸它就会叫，然后就跑了；这只狗跑一段时间（20~50ms）以后就会停下来，也不叫了。

完成 Dog 组件，当用户点击的时候会执行自身的 bark 和 run 方法。给这个 Dog 组件加上状态 isRunning 和 isBarking，在进行相应的动作的时候设置为 true，停下来的时候设置为 false。

分析：使用this.state和this.setState()方法设置两个状态即可：

class Dog extends Component {
constructor () {
    super()
    this.state = {
    isRunning: false,
    isBarking: false
    }
}
bark () {
    console.log('bark')
    this.setState({ isBarking: true })
    setTimeout(() => this.setState({ isBarking: false }), 20)
}
run () {
    console.log('run')
    this.setState({ isRunning:true })
    setTimeout(() => this.setState({ isRunning: false }), 20)

handleClickOnDog= ()=> {
    this.bark()
    this.run()
}
render() {
    return (
    <div onClick={this.handleClickOnDog}>DOG</div>
    )
}
}

题目3：

完成两个组件，电脑 Computer 和显示器 Screen。

电脑有个 status 状态表示电脑现在是开还是关的，status 为 on 为开，status 为 off 为关，默认状态为 off。电脑有个按钮，点击可以自由切换电脑的开关状态。

显示器接受一个名为 showContent 的 props，显示器会把它内容显示出来。如果不传入 showContent，显示器显示 “无内容”。

电脑包含显示器，当电脑状态为开的时候显示器显示“显示器亮了”，否则显示“显示器关了”。

分析：对于showcontent，可以设置static default设置默认值。同时status使用setState()进行控制：

constructor()
{
    super()
    this.state=
    {
        status:false
    }
}
handleClick=() =>
{
    this.setState(
    {
        status:!this.state.status
    }
    )
}
render () {
    return (
    <div>
        <button onClick={this.handleClick}>开关</button>
        <Screen  showContent='233'/>
    </div>
    )
}
}

export default class Screen extends Component {
static defaultProps={
    showContent:'无内容'
  }
render () {
    return (
      <div className='screen'>{this.props.showContent}</div>
    )
  }

}