react学习（四）- 表单

文本框

import React, {Component} from 'react';
class App extends Component {
    constructor(props) {
        super(props);
        
        this.handleInputChange = this.handInputChange.bind(this);
        this.handleTextareaChange = this.handleTextareaChange.bind(this);
        
        this.state = {
            inputValue: '',
            textareaValue = '';
        };
    }
    
    handleInputChange(e) {
        this.setState({
            inputValue: e.target.value
        });
        
    }
    
    handleTextareaChange(e) {
        this.setState({
            textareaValue: e.target.value
        });
    }
    
    render() {
         const {inputValue, textareaValue} = this.state;
         return (
             <div>
                 <p>单行输入框：<input type="text" value={inputValue} onChange={this.handleInputChange} /></p>
                 <p>多行输入框：<textarea  value={e} onChange={this.handleTextareaChange} /></p>
         )
    
    }

}

单选按钮

import React, {Component} from 'react';
class App extends Component{
    constructor(props) {
        super(props);
        
        this.handleChange = this.handleChange.bind(this);
        this.state = {
            radioValue: ''
        };
    }
    
    handleChange(e) {
        this.setState({
            radioValue: e.target.value
        });
    }
    
    render() {
        const {radioValue} = this.state;
        
        return (
            <div>
                <p>gender:</p>
                <label>
                male:
                <input type="text" value="male" checked={radioValue === 'male'} onChange={this.handChange} />
                </label>
                <label>
                female:
                <input type="text" value="female" checked={radioValue === 'female'} onChange={this.handChange} />
                </label>
        )
    }
}

复选框

import React, {Component} from 'react';
class App extends Component {
    constructor(props) {
        super(props);
        this.handChange = this.handChange.bind(this);
        
        this.state = {
            coffee: []
        };
    }
    
    handleChange(e) {
        const {checked, value} = e.target;
        let {coffee} = this.state;
        
        if (checked && coffee.indexOf(value) === -1) {
            coffee.push(value);
        }
        else {
            coffee = coffee.filter(i => i !== value);
        }
        
        this.setState({
            coffee
        });
    }
    
    render() {
        const {coffee} = this.state;
        
        return (
            <div>
                <p>请选择你最喜欢咖啡：</p>
                <label>
                    <input type="checkbox" value="Cappuccino"
                    checked={coffee.indexOf('Cappuccino') !== -1}
                    onChange={this.handleChange} />
                    Cappuccino                    
                 </label>
                 <br />
                 <label>
                    <input type="checkbox" value="CafeMocha"
                    checked={coffee.indexOf('CafeMocha') !== -1}
                    onChange={this.handleChange} />
                    CafeMocha                    
                 </label>
                 <br />
                 <label>
                    <input type="checkbox" value="CaffeLatte"
                    checked={coffee.indexOf('CaffeLatte') !== -1}
                    onChange={this.handleChange} />
                    CaffeLatte                    
                 </label>
                 <br />
                 <label>
                    <input type="checkbox" value="Machiatto"
                    checked={coffee.indexOf('Machiatto') !== -1}
                    onChange={this.handleChange} />
                    Machiatto                    
                 </label>
                 
                 
        )
    }
}

Select组件

 import React, {Component} from 'react';
class App extends Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        
        this.state = {
            area: ['beijing', 'shanghai']
        };      
    }
    
     handleChange(e) {
         const {options} = e.target;
         // 注意，这里返回的options是一个对象，并非数组
         const area = Object.keys(options).filter(i => options[i].selected === true).map(i => options[i].value);
         this.setState({
              area: area
         });
     }
     
     render() {
         const {area} = this.state;
         
         return (
             <select multiple={true} value={area} onChange={this.handleChange}>
                 <option value="beijing">北京</option>
                 <option value="shanghai">上海</option>
                 <option value="hangzhou">杭州</option>
             </select>
         );
     }
}

Select多选组件

import React, {Component} from 'react';
class App extends Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        
        this.state = {
            area: ''
        };      
    }
    
     handleChange(e) {
         this.setState({
              area: e.target.value
         });
     }
     
     render() {
         const {area} = this.state;
         
         return (
             <select value={area} onChange={this.handleChange}>
                 <option value="beijing">北京</option>
                 <option value="shanghai">上海</option>
                 <option value="hangzhou">杭州</option>
             </select>
         );
     }
}