react 获取input 输入框的值

最新推荐文章于 2024-05-12 14:22:00 发布

qq_23069767

最新推荐文章于 2024-05-12 14:22:00 发布

阅读量997

点赞数

分类专栏： tests 文章标签： react

tests 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.非受控组件获取 ref
import React , {Component} from ‘react’;
export default class App extends Component{
search(){
const inpVal = this.input.value;
console.log(inpVal);
}

render(){
    return(
        <div>
            <input type="text" ref={input => this.input = input} defaultValue="Hello"/>
            <button onClick={this.search.bind(this)}></button>
        </div>
    )
}

}
使用defaultValue表示组件的默认状态，此时它只会被渲染一次，后续的渲染不起作用；input的值不随外部的改变而改变，由自己状态改变。
2.受控组件 this.setState({})
import React , {Component} from ‘react’;
export default class App extends Component{
constructor(props){
super(props);
this.state = {
inpValu:’’
}
}

handelChange(e){
    this.setState({
        inpValu:e.target.value
    })
}

render(){
    return(
        <div>
            <input type="text" onChange={this.handelChange.bind(this)} defaultValue={this.state.inpValu}/>
        </div>
    )
}

}
input 输入框的值会随着用户输入的改变而改变，onChange通过对象e拿到改变之后的状态并更新state，setState根据新的状态触发视图渲染，完成更新

原文：https://blog.csdn.net/Shuiercc/article/details/81383679