React表單元素如何使用

這篇文章主要介紹React表單元素如何使用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

受控元素

下面來看一下如何獲取輸入框的值

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     {/* 通過事件細(xì)節(jié)改變inputV的值*/}
        });
        console.log(e.target.value)
    };    
    sub(){
      console.log(this.state.inputV)
    };    
    render(){
        return (
            <div>
                <input type="text" onChange={this.inp} placeholder={this.state.place} value={this.state.inputV}/>
                <br/>
                <button onClick={this.sub}>{this.props.main}</button>{/*此處的main是來自父組件的傳值*/}
            </div>
        )
    }
}
export default Trem;

代碼解讀：
this.inp = this.inp.bind(this); 綁定inp函數(shù)this指向
this.state  初始化變量
inp()  監(jiān)聽input的輸入值
this.state.inputV  通過賦值獲取input的value

textarea 標(biāo)簽

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 (
            <div>
                <textarea type="text" onChange={this.inp} placeholder={this.state.place} value={this.state.inputV}/>                
                <br/>
                <button onClick={this.sub}>{this.props.main}</button>
            </div>
        )
    }
}

export default Trem;

下拉選擇框

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={this.state.selectV} onChange={this.select}>
                    <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;

代碼解讀:
請注意，Coconut選項(xiàng)最初由于selected屬性是被選中的。在React中，并不使用之前的selected屬性，而在根select標(biāo)簽上用value屬性來表示選中項(xiàng)。這在受控組件中更為方便，因?yàn)槟阒恍枰谝粋€(gè)地方來更新組件。

總之，<input type="text">, <textarea>, 和 <select> 都十分類似 - 他們都通過傳入一個(gè)value屬性來實(shí)現(xiàn)對組件的控制。

多個(gè)輸入的解決方法
當(dāng)你有處理多個(gè)受控的input元素時(shí)，你可以通過給每個(gè)元素添加一個(gè)name屬性，來讓處理函數(shù)根據(jù) 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 (
            <form>
                <label>
                Is going:
                <input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleInputChange} />
                </label>
                <br />
                <label>
                Number of guests:
                <input name="numberOfGuests" type="number" value={this.state.numberOfGuests} onChange={this.handleInputChange} />
                </label>
            </form>
        )
    }
}
export default More;

代碼解讀：

this.setState({
});

es6計(jì)算屬性名語法

以上是React表單元素如何使用的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！