React基础语法07-点击按钮，获取input框的值（通过事件对象获取）

王小婷

发布于 2025-05-19 06:32:23

20600

代码可运行

文章被收录于专栏：编程微刊编程微刊

运行总次数：0

代码可运行

点击按钮，获取input框的值（通过事件对象获取）的四个步骤：

1：监听表单的改变事件

模板：

<input  onChange={this.inputChange}></input><button >点击按钮获取input框的值</button>

方法

inputChange=()=>{
        console.log(111)
    }

只要触发inputChange的时候，都会在控制台看到打印111，说明监听成功。

2：在改变的事件里面获取表单输入的值

获取表单输入的值 event.target.value。

inputChange=(event)=>{
        console.log(event.target.value)
}

3：把表单输入的值赋值给username

在this.state里面定义一个空的username:''，并且把把表单输入的值赋值给username。

 //把表单输入的值赋值给username
        this.setState({
            username:event.target.value
        })

4：点击按钮的时候获取state里面的username

然后在模板中按钮上绑定一个点击事件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;