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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
react native基于FlatList下拉刷新上拉加載實現代碼示例
這篇文章主要介紹了react native基于FlatList下拉刷新上拉加載實現代碼示例2018-09-09
React組件三大核心屬性State?props?Refs介紹
組件實例的三大核心屬性是：State、Props、Refs。類組件中這三大屬性都存在。函數式組件中訪問不到?this，也就不存在組件實例這種說法，但由于它的特殊性（函數可以接收參數），所以存在Props這種屬性2023-02-02
這篇文章主要為大家介紹了React優(yōu)雅的封裝SvgIcon組件示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要為大家介紹了如何在Remix中使用tailwindcss方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要為大家介紹了React手寫一個手風琴組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
react-router中Link標簽和a標簽有什么區(qū)別
本文主要介紹了react-router中Link標簽和a標簽有什么區(qū)別,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-06-06
react axios配置代理(proxy),如何解決本地開發(fā)時的跨域問題
這篇文章主要介紹了react axios配置代理(proxy),如何解決本地開發(fā)時的跨域問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
在 React 中組件通信的數據流是單向的，頂層組件可以通過 props 屬性向下層組件傳遞數據，而下層組件不能直接向上層組件傳遞數據，這篇文章主要介紹了使用react+redux實現彈出框案例,需要的朋友可以參考下2022-10-10
React使用useEffect解決setState副作用詳解
這篇文章主要為大家介紹了React使用useEffect解決setState副作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
本篇文章主要介紹了react-native城市列表組件的實例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08