react獲取input輸入框的值的方法示例
更新時間：2021年04月06日 16:36:01 作者：Pinkh
這篇文章主要介紹了react獲取input輸入框的值的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
react 獲取input 輸入框的值的多種方式
- 第一種方式 非受控組件獲取
- 第二種方式 受控組件獲取
非受控組件獲取 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表示組件的默認狀態(tài)，此時它只會被渲染一次，后續(xù)的渲染不起作用；input的值不隨外部的改變而改變，由自己狀態(tài)改變。
受控組件 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拿到改變之后的狀態(tài)并更新state，setState根據新的狀態(tài)觸發(fā)視圖渲染，完成更新。
到此這篇關于react獲取input輸入框的值的方法示例的文章就介紹到這了,更多相關react獲取input輸入框的值內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
next-redux-wrapper使用細節(jié)及源碼分析
這篇文章主要為大家介紹了next-redux-wrapper使用細節(jié)及源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
本文給大家介紹了jenkins部署vue/react項目的問題，文末給大家提到了centOS安裝jenkins的腳本，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-02-02
最近使用react做個滾動監(jiān)聽獲取更多數據效果,當想獲取dom時發(fā)現怎么也獲取不到,下面這篇文章主要給大家介紹了關于React報錯解決之ref返回undefined或null的相關資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了react同構實踐之實現自己的同構模板，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要為大家通過示例源碼解讀React的首次渲染流程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
本文主要介紹了React組件中獲取DOM元素的五種方式：包括使用ref屬性、構造器創(chuàng)建全局變量、動態(tài)綁定ref屬性、綁定函數定義全局變量和使用hook語法查找DOM,感興趣的可以了解一下2025-01-01
本文將會基于react實現滾動菜單欄功能,點擊菜單,內容區(qū)域會自動滾動到對應卡片,內容區(qū)域滑動,指定菜單欄會被選中,代碼簡單易懂,感興趣的朋友一起看看吧2024-03-03
這篇文章主要介紹了深入研究React中setState源碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要為大家介紹了React JSX基礎語法教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
react路由基礎解讀(Router、Link和Route)
這篇文章主要介紹了react路由基礎解讀(Router、Link和Route)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07