react獲取input輸入框的值的方法示例
更新時(shí)間：2021年04月06日 16:36:01 作者：Pinkh
這篇文章主要介紹了react獲取input輸入框的值的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
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表示組件的默認(rèn)狀態(tài)，此時(shí)它只會(huì)被渲染一次，后續(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 輸入框的值會(huì)隨著用戶輸入的改變而改變，onChange通過(guò)對(duì)象e拿到改變之后的狀態(tài)并更新state，setState根據(jù)新的狀態(tài)觸發(fā)視圖渲染，完成更新。
到此這篇關(guān)于react獲取input輸入框的值的方法示例的文章就介紹到這了,更多相關(guān)react獲取input輸入框的值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
react native基于FlatList下拉刷新上拉加載實(shí)現(xiàn)代碼示例
這篇文章主要介紹了react native基于FlatList下拉刷新上拉加載實(shí)現(xiàn)代碼示例2018-09-09
React組件三大核心屬性State?props?Refs介紹
組件實(shí)例的三大核心屬性是：State、Props、Refs。類組件中這三大屬性都存在。函數(shù)式組件中訪問(wèn)不到?this，也就不存在組件實(shí)例這種說(shuō)法，但由于它的特殊性（函數(shù)可以接收參數(shù)），所以存在Props這種屬性2023-02-02
這篇文章主要為大家介紹了React優(yōu)雅的封裝SvgIcon組件示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要為大家介紹了如何在Remix中使用tailwindcss方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
React手寫(xiě)一個(gè)手風(fēng)琴組件示例
這篇文章主要為大家介紹了React手寫(xiě)一個(gè)手風(fēng)琴組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
react-router中Link標(biāo)簽和a標(biāo)簽有什么區(qū)別
本文主要介紹了react-router中Link標(biāo)簽和a標(biāo)簽有什么區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06
react axios配置代理(proxy),如何解決本地開(kāi)發(fā)時(shí)的跨域問(wèn)題
這篇文章主要介紹了react axios配置代理(proxy),如何解決本地開(kāi)發(fā)時(shí)的跨域問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
在 React 中使用 Redux 解決的問(wèn)題小結(jié)
在 React 中組件通信的數(shù)據(jù)流是單向的，頂層組件可以通過(guò) props 屬性向下層組件傳遞數(shù)據(jù)，而下層組件不能直接向上層組件傳遞數(shù)據(jù)，這篇文章主要介紹了使用react+redux實(shí)現(xiàn)彈出框案例,需要的朋友可以參考下2022-10-10
React使用useEffect解決setState副作用詳解
這篇文章主要為大家介紹了React使用useEffect解決setState副作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
react native帶索引的城市列表組件的實(shí)例代碼
本篇文章主要介紹了react-native城市列表組件的實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08