React学习05----事件对象event，拿到input输入框的值，类似Vue的双向数据绑定

最新推荐文章于 2024-11-28 11:21:39 发布

原创最新推荐文章于 2024-11-28 11:21:39 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了在React中如何利用事件对象event获取input输入框的值，并通过onChange和refs实现双向数据绑定。通过四个具体例子逐步讲解了监听表单变化、事件处理、状态更新以及使用state和refs同步视图与模型的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目结构：
在这里插入图片描述

事件对象:
在触发DOM上的某个事件时,会产生一个事件对象event。这个对象中包含着所有与事件有关的信息
常用信息有dom节点，dom属性

例子：Home.js

import React from 'react';

/**
 * 事件对象:在触发DOM上的某个事件时,会产生一个事件对象event。这个对象中包含着所有与事件有关的信息
 * 常用信息有dom节点，dom属性
 */

class Home extends  React.Component{

    constructor(props){
        super(props);
        this.state={
            name:"zhh",
            msg:"所有信息",
        }
    }
    // 事件对象:在触发DOM上的某个事件时,会产生一个事件对象event。这个对象中包含着所有与事件有关的信息
    getData=(event)=>{
        // alert(this.state.msg);

        // event对象中包含着所有与事件有关的信息
        // console.log(event);

        // 获取执行事件的dom节点
        // alert(event.target);

        // 获取dom节点（button对象），设置背景颜色，是红色
        event.target.style.background='red';

        //获取dom的属性（获取 button 的 aid 属性）
        alert(event.target.getAttribute('aid'))



    }
    render() {
        return(
            <div>
                {this.state.name}
                <br/>
                <button aid="123" onClick={this.getData}>事件对象</button>
            </div>

        );

    }


}
export default Home;

通过 event 拿到input输入框的值
思路：
获取表单的值(获取 input 输入框的值)
1、监听表单(input)的改变事件 onChange
2、在改变的事件里面获取表单输入的值事件对象
3、把表单输(input)入的值赋值给username this.setState({})
4、点击按钮的时候获取 state里面的username this.state.username

例子2：Home2.js

import React from 'react';

/**
 * 表单事件（拿到input输入框的值）
 * 通过 event 拿到输入的值
 */
class Home2 extends React.Component{
    constructor(props){
        super(props);
        this.state={
            name:"Home2",
            msg:"Home2信息",
            username:'',
        }
    }
    // 监听 input 输入框的改变
    inputChange=(event)=>{
        //获取 input 输入框中的值
        //event 拿到输入的值
        console.log(event.target.value);
    //    把输入框中的值赋值给 构造函数中的对象
        this.state = {
            username:event.target.value,
        }
    }

    //获取输入框中的值
    getInputOnClick=()=>{
        let username = this.state.username;
        console.log("拿到输入框的值"+username);
    }

    render() {
        return(
            <div>
                {this.state.name}

                <h2>表单事件(获取 input 输入框的值)</h2>
                {/* 获取表单的值(获取 input 输入框的值) */}
                {/* 1、监听表单(input)的改变事件                        onChange */}
                {/* 2、在改变的事件里面获取表单输入的值           事件对象 */}
                {/* 3、把表单输(input)入的值赋值给username              this.setState({}) */}
                {/* 4、点击按钮的时候获取 state里面的username     this.state.username */}


                <input onChange={this.inputChange}/> <button onClick={this.getInputOnClick}>获取input的值</button>

            </div>

        );
    }

}
export default Home2;

通过 refs 拿到input输入框的值
思路：
1、监听表单的改变事件 onChange
2、在改变的事件里面获取表单输入的值 ref获取
3、把表单输入的值赋值给username this.setState({})
4、点击按钮的时候获取 state里面的username this.state.username
例子3 Home3.js

import React from 'react';
/**
 * 表单事件（拿到input输入框的值）
 * 通过 refs 拿到输入的值
 */
class Home3 extends React.Component{
    constructor(props){
        super(props);
        this.state={
            name:"Home3",
            masg:"Home3信息",
            username:'',
        }



    }
    /**
     *
     监听 input 输入框的改变
     获取dom节点
     1、给元素定义ref属性
     <input ref="username" />
     2、通过this.refs.username 获取dom节点

     * */
    inputChange=()=>{
        // this.refs.username.value; 获取 dom 节点，并拿到输入框中的值
        let val = this.refs.username.value;
        // 把拿到的值赋值给 username
        this.setState({
            username:val
        })
    }

    //获取输入框中的值
    getInputOnClick=()=>{
        let username = this.state.username;
        console.log("拿到输入框的值"+username);
    }

    render() {
        return(
            <div>
                {this.state.name}
                <h2>表单事件(获取 input 输入框的值)</h2>

                {/* 获取表单的值

                1、监听表单的改变事件                        onChange
                2、在改变的事件里面获取表单输入的值            ref获取
                3、把表单输入的值赋值给username              this.setState({})
                4、点击按钮的时候获取 state里面的username     this.state.username
                 */}

                <input ref="username" onChange={this.inputChange}/> <button onClick={this.getInputOnClick}>获取input的值</button>

            </div>

        );
    }


}
export default Home3;

React实现类似Vue的双向数据绑定
model（构造函数中数据）改变影响View,
view改变反过来影响model (构造函数中数据）
例子4： Home4.js

import React from 'react';

/**
 * React实现类似Vue的双向数据绑定
 * model（构造函数中数据）改变影响View,
 * view改变反过来影响model (构造函数中数据）
 */
class Home4 extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            name:"Home4",
            msg:"Home4信息",
            username:'zhh',
        }
    }
    /**
     * 监听输入框的方法
     * */
    inputChange=(event)=>{
        // 修改username
        this.setState({
            username:event.target.value
        })

    }

    setUsername=()=>{
        this.setState({
           username:'李四'
        })

    }


    render() {
        return(
            <div>
                <h2>双向数据绑定</h2>


                {/* model（构造函数中数据）改变影响View    view改变反过来影响model (构造函数中数据） */}
                {/*onChange  监听输入框的数据 */}
                {/*view改变反过来影响model (构造函数中数据）*/}
                <input  value={this.state.username} onChange={this.inputChange}/>

                <p> {this.state.username}</p>

                {/*model（构造函数中数据）改变影响View*/}
                <button onClick={this.setUsername}>改变username的值</button>



            </div>



        );
    }


}
export default Home4;

ok,完了
源码下载：
https://download.youkuaiyun.com/download/zhaihaohao1/10980228