关于react基础问题

网页上面做一个输入框，一个按钮，然后下面是一个盒子
在输入框里面输入内容，然后点击按钮后，将输入框里面的内容显示在盒子里面，用react基础实现

class MyComponent extends React.Component {

  handleClick = () => {
    let { user, text } = this;
    text.innerText = user.value
  }
  render() {
    return (
      <div>
        <input type="text" name="username" ref={(el) => this.user = el} />
        <button onClick={this.handleClick}>提交</button>
        <div ref={el => this.text = el}></div>
      </div>
    )
  }
}

就是 点击事件 和 change事件

class V extends Component {
    state = {
        value: "",
        text: ""
    };
    inpChange = (e) => {
        console.log(e)
        this.setState({
            value: e.target.value
        })
    }
    submitVal = () => {
        const { value } = this.state;
        this.setState({
            text: value
        })
    }
    render() {
        const { value, text } = this.state;
        return (
            <div>
                <input type="text" onChange={this.inpChange} value={value} />
                <button onClick={this.submitVal}>提交</button>
                <div>{text}</div>
            </div>
        );
    }
}