Javascript 如何在显示用户名后立即显示它'；提交了什么？

这是我想做的一件简单的事情，但我是新手，需要帮助。希望用户输入他们的姓名，一旦他们输入，我希望返回一个：

hi用户名

这可能很简单，但对新人来说不是。如果有人能在没有答案的情况下解释我应该首先做什么，那将非常感谢

  import React, { Component } from 'react';



 class App extends Component {
  constructor(){
    super();
      this.state = {
      input: ''
     }
     this.handleClick = this.handleClick.bind(this);
  }
    // setting the setState to new value

     handleClick(e){
     this.setState({
      input: this.state.input
    })
   }

   render(){

     //userName holds value 
     const userName = this.state.input;

     if(userName === 'name') {

     return <h4>hi</h4>  
  } 
  return (
     <div onSubmit={this.handleClick} style={{textAlign: "center"}}>

      <h3>User enter info</h3>

       <label>
     <input type='text' name='name' style={{ height: 20, width: 200}}/>

      </label>
   <div>

     <input type="submit" value="Submit" />
     <h3>{userName}</h3>

    </div>

  </div>
  );
 }
}

export default App;

import React，{Component}来自'React'；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
输入：“”
}
this.handleClick=this.handleClick.bind（this）；
}
//将设置状态设置为新值
handleClick（e）{
这是我的国家({
输入：this.state.input
})
}
render（）{
//用户名有价值
const userName=this.state.input；
如果（用户名=='name'）{
回电
} 
返回(
用户输入信息
{userName}
);
}
}
导出默认应用程序；

在handleClick函数中，使用指定的参数：

 handleClick(e){
    this.setState({input: e.input});}

---

1）

onsubmit

属性只能与

标记一起使用。2） 您从未在代码中更改过

this.state.input的值。您应该在文本输入中捕获
onChange
事件，并在其处理程序中使用
setState
。3） 您的
handleClick（）
中的
setState
是多余的，没有任何作用。不相关，但有些随机的缩进使代码更难思考。@shkaper，谢谢您，我很感谢它的帮助。我能想出如何使它工作。