react中进行状态提升，多个组件公用的组件提到父组件

我们使用一个日期和毫秒实时转化的样例作为例子，像图中这种，上面输入日期，下边可以实时转为毫秒，同时毫秒也可以实时转为日期：

大概思考的方向：
首先需要一个输入组件，承载用户的输入；然后需要一个父组件存放这两个输入组件。如果把state放在子组件中，那再父组件中调用的两个子组件就是完全相互独立的，就不能实时更新，因此我们需要把state提升到父组件中，既然state提升到父组件中了，那么两个子组件中的值都应该来自父组件的传递，子组件中获得的用户的值也应该在父组件中修改，因为state在父组件中（这很重要，组件可以传递的不仅有值还可以传递方法）

import React,{Component} from 'react'
import constant from '../constant/index'

const tomillisecond = (data) =>{
    if(data ==''){
        return ''
    }else{
        return Date.parse(new Date(data))
    }
}

const todate = (millisecond) =>{
    if(millisecond ==''){
        return ''
    }else{
        return new Date(millisecond)
    }
   
}

const Convert = (timer,fun) => {
    return fun(timer)
}

export default class TimerChange extends Component{
    constructor(){
        super()
        this.state = {timer:'', style:'date'}
    }

    handleDateChange(timer){
        this.setState({timer:timer,style:'date'})
    }

    handleMillisecondChange(timer){
        this.setState({timer:timer,style:'millisecond'})
    }

    render(){
        const timer = this.state.timer
        const style = this.state.style
        const date = style === 'millisecond' ? Convert(timer,todate): timer
        const millisecond = style === 'date' ? Convert(timer,tomillisecond) : timer
        return (
            <div>
                <TimerInput 
                    style='date' 
                    timer={date}
                    onTimerChange={(timer) => this.handleDateChange(timer)}
                />
                <TimerInput 
                    style='millisecond' 
                    timer={millisecond}
                    onTimerChange={(timer) => this.handleMillisecondChange(timer)}
                />
            </div>
        )
    }
}

class TimerInput extends Component{
    constructor(){
        super()
    }

    handleChange = (e) =>{
        /* console.log(e.target.value)
        let reg =  /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
        let regExp = new RegExp(reg)
        let value = e.target.value
        if(regExp.test(value)){
            this.props.onTimerChange(value)
        }   */
        this.props.onTimerChange(e.target.value) 
    }
    render(){
        const style = this.props.style 
        const format = constant.TIME_FORMAT
        const timer = this.props.timer
        return(
            <fieldset>
                <legend>{format[style]}:</legend>
                <input 
                    value = {timer}
                    onChange = {(e) => this.handleChange(e)}
                />
            </fieldset>
        )
    }
}