React监听文本框的值并将新输入的值赋值给组件字段

最新推荐文章于 2024-06-28 10:04:48 发布

kaka_1994

最新推荐文章于 2024-06-28 10:04:48 发布

阅读量693

点赞数

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

本文链接：https://blog.youkuaiyun.com/javakaka666/article/details/127265464

版权

React 专栏收录该内容

8 篇文章

订阅专栏

import React from "react";

class New extends React.Component{


constructor(props){
    super(props);
    this.state={
        username:"kaka1994",
        age:18
    }
}


run=(e)=>{
    alert(e.target.getAttribute("aid"));  //获取到dom的值
    e.target.style.background='red'   //改变按钮的颜色
}
//监听文本框的值
inputChange=(e)=>{
    console.log(e.target.value); //监听文本框的值
    this.setState({
        username:e.target.value   //将输入的文本框中值赋值给组件中的字段
    })
}
//获取重新赋值后的值
getInput=()=>{
    alert(this.state.username)
}

render(){
    return(
        <div>
        这是New组件{this.state.username}       
        <br />
        <br />
         {/* 改变值 */}       
        <button aid="123" onClick={this.run}>获取dom值</button>
        <br />
        <br />
        {/* 将值赋给username */}  
        <input onChange={this.inputChange} /><button onClick={this.getInput}>获取input值</button>

        </div>
    )
}



}
export default New;