React监听文本框获取DOM值的2种方式

最新推荐文章于 2023-06-09 17:32:40 发布

kaka_1994

最新推荐文章于 2023-06-09 17:32:40 发布

阅读量424

点赞数

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/javakaka666/article/details/127283239

版权

React 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

核心代码：


import React from "react";
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username:'kaka1994',
            age:18
         }; 
    }

    run=()=>{
        alert("这是Run方法");
    }

    inutValue=(e)=>{
        console.log(e.target.value)
        this.setState({
            username:e.target.value
        })
    }
    getInput=(str)=>{
       alert (this.state.username)
    }  
    getValue=()=>{
        alert(this.state.username)
    }

    inputValue=()=>{
        let val =this.refs.username.value;
        this.setState({
            username:val
        })
    }

    render() {
        return (
            <div>
                这是demo组件 {this.state.username}
                <br />
                <br />
                <br />
                <button onClick={this.run}>调用run方法</button>
                <br />
                <br />
                <button onClick={this.getValue}>获取state值</button>
                <br />
                <br />
                {/* 实现监控文本框内的值，然后赋值给state对象属性   第一种*/}
                <input onChange={this.inutValue} /><button  onClick={this.getInput}>点击获取文本框内的值---第一种方式</button>

                <br />
                <br />
                {/* 实现监控文本框内的值，然后赋值给state对象属性 */}
                <input ref="username" onChange={this.inputValue} /><button  onClick={this.getInput}>点击获取文本框内的值---第二种方式</button>

            </div>
        );
    }
}

export default Demo;

运行结果：