React1.5双向数据绑定

//App.js参照上一篇
import React, { Component } from 'react'

export default class PropsChild extends Component {
    constructor(props){
        super(props)
        this.state={
          showTitle:true,
          inputval:'大镁铝要变身了'
        }
    }
    //第二种
    showTitleFun(){
        this.setState({showTitle:false})
    };
    //每次触发DOM事件时会产生一个事件对象e,其中target属性是获取触发事件对象的目标，也就是绑定事件的元素，e.target表示该DOM元素，然后在获取其相应的属性值
    inputvalChange=(e)=>{
        console.log(e.target.value)
        this.setState({
           inputval:e.target.value
        })
    }
    render() {
        let result
        if(this.state.showTitle){
            result=(
                <h1>{this.props.title}</h1>
            )            
        }else{
            result=null
        }
        return (
          <div>{result}
          <button onClick={()=>this.showTitleFun()}>{this.state.showTitle?<p>大镁铝来了</p>:<p>大镁铝走了</p>}</button>
          {/* 动态绑定value属性，监听input的onChange事件 */}
          <br/>
          <input type="text" value={this.state.inputval} onChange={e=>this.inputvalChange(e)}/>{this.state.inputval}
          </div>
        )
    }
}