react获取input value值的二中方法

Posted 2022-12-04 fengshaopu

· 第一可以用event

· 第二可以用ref

1.第一种ref

import './aap.css'
import React from 'react';
class  examplePage extends React.Component 
      
  inputChange()
     var username=this.refs.username.value
     this.setState(
      date: username
    );
   
  
  
  click2=()=>
    alert(this.state.date);
  


render() 
    return (
     <div className="App">
      <br />
      <h1>Hello, world!</h1>
      <h1>现在的时间是:</h1> <h1 id="files"></h1>
       <div id="input-border">
          <input placeholder="请输入账号" ref='username' onChange= 
            ()=>this.inputChange()/><br/>
          <input placeholder="请输入密码" ref='password' onChange= 
            ()=>this.inputChangev() /><br/>
          <button onClick=this.click2>点击2</button>
       </div>   
      </div>
    );
  



  
  export default examplePage;

  

第二种event 

import './aap.css'
import React from 'react';
class  examplePage extends React.Component 
      
   
  inputChange(e)
     var username=e.target.value
     this.setState(
      date: username
    );
   
  
  
  click2=()=>
    alert(this.state.date);
  


render() 
    return (
     <div className="App">
      <br />
      <h1>Hello, world!</h1>
      <h1>现在的时间是:</h1> <h1 id="files"></h1>
       <div id="input-border">
          <input placeholder="请输入账号" onChange=(e)=>this.inputChange(e)/><br/>
          <input placeholder="请输入密码" onChange=(e)=>this.inputChangev(e) /><br/>
          <button onClick=this.click2>点击2</button>
       </div>   
      </div>
    );
  


  
  export default examplePage;