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...