Introduction to the usage of React form elements (with code)

This article brings you an introduction to the usage of React form elements (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.

Today we will talk about react form elements.

Controlled elements

Let’s take a look at 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:"请输入...",
            inputV:''
        }
    };
    inp(e){
        this.setState({
            inputV:e.target.value     {/* 通过事件细节改变inputV的值*/}
        });
        console.log(e.target.value)
    };    
    sub(){
      console.log(this.state.inputV)
    };    
    render(){
        return (
            dc6dce4a544fdca2df29d5ac0ea9906b
                62e199ef0ab75a2a7be23da5fa1c717d
                076402276aae5dbec7f672f8f4e5cc81
                459c89d2db27bf5521f6ebf243005869{this.props.main}65281c5ac262bf6d81768915a4a77ac0{/*此处的main是来自父组件的传值*/}
            16b28748ea4df4d9c2150843fecfba68
        )
    }
}
export default Trem;

Code interpretation:
this.inp = this. inp.bind(this); Bind the inp function this to point to
this.state Initialize the variable
inp() Monitor the input value of the input
this.state.inputV Obtain the value of the input through assignment

textarea tag

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:"请输入...",
            inputV:''
        }
    };
    inp(e){
        this.setState({
            inputV:e.target.value    
        });
        console.log(e.target.value)
    };    
    sub(){
      console.log(this.state.inputV)
    };    
    render(){
        return (
            dc6dce4a544fdca2df29d5ac0ea9906b
                579a56a427fedd3f43e55073182d8083                
                076402276aae5dbec7f672f8f4e5cc81
                459c89d2db27bf5521f6ebf243005869{this.props.main}65281c5ac262bf6d81768915a4a77ac0
            16b28748ea4df4d9c2150843fecfba68
        )
    }
}

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 (
            dc6dce4a544fdca2df29d5ac0ea9906b                
                3b8a70dc2667e2f464d10ebbd01d4c15
                    5cd170ccbf19f643965dc1b11b38534fGrapefruit4afa15d3069109ac30911f04c56f3338
                    67b1a94f022b03f32c16ff26047dc8f5Lime4afa15d3069109ac30911f04c56f3338
                    6c713fef7b2c7826473712e34196e8b6Coconut4afa15d3069109ac30911f04c56f3338
                    7d46921a401f79981639c6e9dc841feaMango4afa15d3069109ac30911f04c56f3338
                18bb6ffaf0152bbe49cd8a3620346341
                076402276aae5dbec7f672f8f4e5cc81
            16b28748ea4df4d9c2150843fecfba68
        )
    }
}

export default Trem;

Code interpretation:
Please note that the Coconut option is initially selected due to the selected attribute Chosen. In React, the previous selected attribute is not used, but the value attribute is used on the root select tag to represent the selected item. This is more convenient in controlled components, since you only need to update the component in one place.

In short, 23efcc05e98690ceeb219581933e4231, 4750256ae76b6b9d804861d8f69e79d3, and 221f08282418e2996498697df914ce4e are all very similar - they all implement the control by passing in a value attribute. Control of components.

Solution to multiple inputs
When you have multiple controlled input elements, you can add a name to each element Attribute to let the handler choose what to do based on the value of event.target.name.

import React,{Component} 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 (
            ff9c23ada1bcecdd1a0fb5d5a0f18437
                2e1cf0710519d5598b1f0f14c36ba674
                Is going:
                bb9a5cf863b3be50dad45a483335a732
                8c1ecd4bb896b2264e0711597d40766c
                ff9d32c555bb1d9133a29eb4371c1213
                2e1cf0710519d5598b1f0f14c36ba674
                Number of guests:
                0cc06ec0576f2b965bb67af4c374cf2f
                8c1ecd4bb896b2264e0711597d40766c
            f5a47148e367a6035fd7a2faa965022e
        )
    }
}
export default More;

Code interpretation:

this.setState({
});

es6 calculated attribute name syntax

Source code address: https://github.com/Nick091608...

[Related recommendations: react video tutorial】

The above is the detailed content of Introduction to the usage of React form elements (with code). For more information, please follow other related articles on the PHP Chinese website!