本日来讲讲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…