react中實現刪除輸入框中的內容

import React,{Component} from 'react'
class Clear extends Component{
  constructor(props){
    super(props)
    this.state={
      data:''
    }
  }
  updateState=(e)=>{
    this.setState({data:e.target.value})
  }
  clearInput=()=>{
    this.setState({data:''})
    this.myInput.focus()
  }
  render(){
    return(
      <div>
        <input value={this.state.data} onChange={this.updateState} ref={myInput=>this.myInput=myInput}></input>
        <button onClick={this.clearInput}>Clear</button>
        <h4>{this.state.data}</h4>
      </div>
    )
  }
}
export default Clear