React example of how to get the value of the input box

React multiple ways to get the value of the input box

• The first method is uncontrolled component acquisition
• The second method is to obtain the controlled component

Uncontrolled component gets 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>
 )
 }
}

Use defaultValue to represent the default state of a component. It will only be rendered once and subsequent rendering will not work. The value of the input does not change with external changes, but is changed by its own state.

Controlled component 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>
 )
 }
}

The value of the input box will change as the user input changes. onChange obtains the changed state through object e and updates the state. setState triggers view rendering according to the new state to complete the update.

This is the end of this article about how to use react to get the value of an input box. For more information about how to use react to get the value of an input box, please search for previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!