react获取input value值的二中方法

最新推荐文章于 2025-06-10 11:54:05 发布

原创最新推荐文章于 2025-06-10 11:54:05 发布 · 1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react.js #javascript #前端

react 专栏收录该内容

9 篇文章

订阅专栏

这篇博客探讨了在React中如何利用ref和event处理用户输入的方法。通过示例代码展示了如何获取输入框的值，并更新组件状态，以及在按钮点击事件中展示状态值。两种方式分别是直接通过ref获取元素值和使用event.target.value来捕获输入变化。

· 第一可以用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;