中国体彩网唯一官网
首頁 > web前端 > js教程 > 正文

React表單元素的用法介紹(附代碼)

轉載 2019-04-04 16:41:46 0 392
第六期線上培訓班
本篇文章給大家帶來的內容是關于React表單元素的用法介紹(附代碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

今天來講講react的表單元素。

受控元素

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

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 (
            <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函數this指向
this.state 初始化變量
inp() 監聽input的輸入值
this.state.inputV 通過賦值獲取input的value

textarea 標簽

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選項最初由于selected屬性是被選中的。在React中,并不使用之前的selected屬性,而在根select標簽上用value屬性來表示選中項。這在受控組件中更為方便,因為你只需要在一個地方來更新組件。

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

多個輸入的解決方法
當你有處理多個受控的input元素時,你可以通過給每個元素添加一個name屬性,來讓處理函數根據 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計算屬性名語法

源碼地址:https://github.com/Nick091608...

【相關推薦:react視頻教程

以上就是React表單元素的用法介紹(附代碼)的詳細內容,更多請關注php中文網其它相關文章!

php中文網最新課程二維碼
  • 相關標簽:javascript
  • 本文轉載于:segmentfault,如有侵犯,請聯系刪除
  • 相關文章


  • react中使用css的七種方法介紹(附代碼)
  • React組件通信的介紹(代碼示例)
  • react生命周期的全面了解(附代碼)
  • 使用RxJS管理React應用狀態的介紹
  • ReactDom.render的詳細解析
  • React表單元素的用法介紹(附代碼)
  • 網友評論

    文明上網理性發言,請遵守 新聞評論服務協議

    我要評論
    獨孤九賤(5)_ThinkPHP5視頻教程

    獨孤九賤(5)_ThinkPHP5視頻教程

    ThinkPHP是國內最流行的中文PHP開發框架,也是您Web項目的最佳選擇。《php.cn獨孤九賤(5)-ThinkPHP5視頻教程》課程以ThinkPHP5最新版本為例,從最基本的框架常識開始,將...

    獨孤九賤(4)_PHP視頻教程

    獨孤九賤(4)_PHP視頻教程

    江湖傳言:PHP是世界上最好的編程語言。真的是這樣嗎?這個梗究竟是從哪來的?學會本課程,你就會明白了。 PHP中文網出品的PHP入門系統教學視頻,完全從初學者的角度出發,絕不玩虛的,一切以實用、有用...

    獨孤九賤(1)_HTML5視頻教程

    獨孤九賤(1)_HTML5視頻教程

    《php.cn原創html5視頻教程》課程特色:php中文網原創幽默段子系列課程,以惡搞,段子為主題風格的php視頻教程!輕松的教學風格,簡短的教學模式,讓同學們在不知不覺中,學會了HTML知識。 ...

    ThinkPHP5實戰之[教學管理系統]

    ThinkPHP5實戰之[教學管理系統]

    本套教程,以一個真實的學校教學管理系統為案例,手把手教會您如何在一張白紙上,從零開始,一步一步的用ThinkPHP5框架快速開發出一個商業項目。

    PHP入門視頻教程之一周學會PHP

    PHP入門視頻教程之一周學會PHP

    所有計算機語言的學習都要從基礎開始,《PHP入門視頻教程之一周學會PHP》不僅是PHP的基礎部分更主要的是PHP語言的核心技術,是學習PHP必須掌握的內容,任何PHP項目的實現都離不開這部分的內容,通...

    作者信息

    相關視頻教程

  • React中文開發手冊 React中文開發手冊
  • react+redux(英文版) react+redux(英文版)
  • React Native 電商項目實戰 React Native 電商項目實戰
  • ReactJS中文基礎視頻教程 ReactJS中文基礎視頻教程
  • 相關視頻章節

    第六期線上培訓班 中国体彩网唯一官网