文字框

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>
         );
     }
}