赞
踩
点击按钮,获取input框的值(通过事件对象获取)的四个步骤:
模板:
<input onChange={this.inputChange}></input><button >点击按钮获取input框的值</button>
方法
- inputChange=()=>{
- console.log(111)
- }
只要触发inputChange
的时候,都会在控制台看到打印111
,说明监听成功。
获取表单输入的值 event.target.value
。
- inputChange=(event)=>{
- console.log(event.target.value)
- }
在this.state
里面定义一个空的username:''
,并且把把表单输入的值赋值给username。
- //把表单输入的值赋值给username
- this.setState({
- username:event.target.value
- })
然后在模板中按钮上绑定一个点击事件getInput
,点击按钮的时候获取state
里面的username
。
<button onClick={this.getInput} >点击按钮获取input框的值</button>
写好之后写点击事件getInput
的方法,因为input
框的值已经给了username
,所以:
- getInput=()=>{
- alert(this.state.username);
- }
参考代码:
- import React, { Component } from 'react';
- import photo from '../asset/images/photo.jpg';
- import '../asset/css/index.css'
- class Home extends Component {
- constructor() {
- super();
- //react定义数据
- this.state = {
- msg: '我是王小婷定义的数据OO',
- username:''
- }
- }
- inputChange=(event)=>{
- console.log(event.target.value);
- //把表单输入的值赋值给username
- this.setState({
- username:event.target.value
- })
- }
- getInput=()=>{
- alert(this.state.username);
- }
- render() {
- return (
- <div>
- <input onChange={this.inputChange}></input><button onClick={this.getInput} >点击按钮获取input框的值</button>
- </div>
- )
- }
- }
- export default Home;
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。