Question

这是我想做的一件简单的事情，但是我是新手，需要帮助。希望用户输入他们的姓名，一旦输入，我想返回一个：
<h3>hi username</h3>
这可能很简单，但对于新手而言却并非如此。如果有人能解释我在没有答案的情况下首先应该做什么，那将非常感谢。

  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;

Answer 1

在handleClick函数上，使用您分配的参数：

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

提交用户名后如何显示？

1 个答案: