快捷導(dǎo)航

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ì)隨著用戶(hù)輸入的改變而改變，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)文章

next-redux-wrapper使用細(xì)節(jié)及源碼分析
這篇文章主要為大家介紹了next-redux-wrapper使用細(xì)節(jié)及源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
聊聊jenkins部署vue/react項(xiàng)目的問(wèn)題
本文給大家介紹了jenkins部署vue/react項(xiàng)目的問(wèn)題，文末給大家提到了centOS安裝jenkins的腳本，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2022-02-02
React報(bào)錯(cuò)解決之ref返回undefined或null
最近使用react做個(gè)滾動(dòng)監(jiān)聽(tīng)獲取更多數(shù)據(jù)效果,當(dāng)想獲取dom時(shí)發(fā)現(xiàn)怎么也獲取不到,下面這篇文章主要給大家介紹了關(guān)于React報(bào)錯(cuò)解決之ref返回undefined或null的相關(guān)資料,需要的朋友可以參考下
2022-08-08
react同構(gòu)實(shí)踐之實(shí)現(xiàn)自己的同構(gòu)模板
這篇文章主要介紹了react同構(gòu)實(shí)踐之實(shí)現(xiàn)自己的同構(gòu)模板，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
通過(guò)示例源碼解讀React首次渲染流程
這篇文章主要為大家通過(guò)示例源碼解讀React的首次渲染流程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
react組件中獲取DOM元素的五種方式
本文主要介紹了React組件中獲取DOM元素的五種方式：包括使用ref屬性、構(gòu)造器創(chuàng)建全局變量、動(dòng)態(tài)綁定ref屬性、綁定函數(shù)定義全局變量和使用hook語(yǔ)法查找DOM,感興趣的可以了解一下
2025-01-01
React實(shí)現(xiàn)菜單欄滾動(dòng)功能
本文將會(huì)基于react實(shí)現(xiàn)滾動(dòng)菜單欄功能,點(diǎn)擊菜單,內(nèi)容區(qū)域會(huì)自動(dòng)滾動(dòng)到對(duì)應(yīng)卡片,內(nèi)容區(qū)域滑動(dòng),指定菜單欄會(huì)被選中,代碼簡(jiǎn)單易懂,感興趣的朋友一起看看吧
2024-03-03
深入研究React中setState源碼
這篇文章主要介紹了深入研究React中setState源碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
React JSX基礎(chǔ)語(yǔ)法教程示例
這篇文章主要為大家介紹了React JSX基礎(chǔ)語(yǔ)法教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-09-09
react路由基礎(chǔ)解讀(Router、Link和Route)
這篇文章主要介紹了react路由基礎(chǔ)解讀(Router、Link和Route)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07