Let's talk about the form elements of react today.
Controlled element
Let's see how to get the value of the input box
import React, { Component } from 'react'; class Trem extends React.Component { constructor(props){ super(props); this.inp = this.inp.bind(this); this.sub = this.sub.bind(this); this.state = { place:"Please input...", inputV:'' } }; inp(e){ this.setState({ inputV:e.target.value {/* Changing the value of inputV through event details*/} }); console.log(e.target.value) }; sub(){ console.log(this.state.inputV) }; render(){ return ( <div> <input type="text" onChange= placeholder= value=/> <br/> <button onClick=></button>{/*The main here is the value passed from the parent component*/} </div> ) } } export default Trem;
Code interpretation:
this.inp = this.inp.bind(this); bind InP function this points to
this.state initialization variable
Input() listens for the input value of input
this.state.inputV gets the value of input by assigning a value
textarea label
import React, { Component } from 'react'; class Trem extends React.Component { constructor(props){ super(props); this.inp = this.inp.bind(this); this.sub = this.sub.bind(this); this.state = { place:"Please input...", inputV:'' } }; inp(e){ this.setState({ inputV:e.target.value }); console.log(e.target.value) }; sub(){ console.log(this.state.inputV) }; render(){ return ( <div> <textarea type="text" onChange= placeholder= value=/> <br/> <button onClick=></button> </div> ) } } export default Trem;
Drop down selection box
import React, { Component } from 'react'; class Trem extends React.Component { constructor(props){ super(props); this.select = this.select.bind(this); this.state = { selectV:'coconut' } }; select(e){ this.setState({ selectV:e.target.value }); console.log(e.target.value) }; render(){ return ( <div> <select value= onChange=> <option value="grapefruit">Grapefruit</option> <option value="lime">Lime</option> <option value="coconut">Coconut</option> <option value="mango">Mango</option> </select> <br/> </div> ) } } export default Trem;
Code interpretation:
Note that the cocout option was initially selected because of the selected property. In React, the previous selected attribute is not used, but the value attribute is used to represent the selected item on the root select tag. This is more convenient in controlled components, because you only need to update components in one place.
In short, < input type = "text" >, < textarea >, and < Select > are very similar - they all control the components by passing in a value attribute.
Solutions to multiple inputs
When you have multiple controlled input elements, you can add a name attribute to each element to let the handler choose what to do based on the value of event.target.name.
import React, from 'react'; class More extends React.Component { constructor(props){ super(props); this.state = { isGoing: true, numberOfGuests: 2 }; this.handleInputChange = this.handleInputChange.bind(this); }; handleInputChange(event) { const target = event.target; const value = target.type === 'checkbox' ? target.checked : target.value; const name = target.name; this.setState({ [name]: value }); console.log(event.target.checked,event.target.value) }; render(){ return ( <form> <label> Is going: <input name="isGoing" type="checkbox" checked= onChange= /> </label> <br /> <label> Number of guests: <input name="numberOfGuests" type="number" value= onChange= /> </label> </form> ) } } export default More;
Code interpretation:
this.setState({
});
es6 calculation attribute name syntax
Source address: https://github.com/Nick091608...