React表單元素的用法介紹（附程式碼）

這篇文章帶給大家的內容是關於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>
                <br>
                <button>{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></textarea>                
                <br>
                <button>{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>
                    <option>Grapefruit</option>
                    <option>Lime</option>
                    <option>Coconut</option>
                    <option>Mango</option>
                </select>
                <br>
            </div>
        )
    }
}

export default Trem;

程式碼解讀:
請注意，Coconut選項最初由於selected屬性是被選中的。在React中，並不使用先前的selected屬性，而在根select標籤上用value屬性來表示選取項目。這在受控組件中更為方便，因為你只需要在一個地方來更新組件。

總之，, , 和<select> 都十分類似- 他們都透過傳入一個value屬性來實現對組件的控制。 </select>

多個輸入的解決方法
當你有處理多個受控的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 (
            

                                 Is going:                                                   
                                 Number of guests:                                               

        )     } } export default More;

程式碼解讀：

this.setState({
});

es6計算屬性名稱語法

原始碼位址：https://github.com/Nick091608...

【相關推薦：react影片教學】

#

以上是React表單元素的用法介紹（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！