React(0.13)定義一個多選的元件

wensongyu發表於2016-03-25
React元件
<!DOCTYPE html>
<html>
    <head>
        <title>React JS</title>
        <script src="../build_0.13/react.js"></script>
        <script src="../build_0.13/JSXTransformer.js"></script>
    </head>
    <body>
        <div id="example">
        
        </div>
        
        <script type="text/jsx">
            var MySelect = React.createClass({
                    //初始化元件的值
                    getInitialState:function(){
                        return {options:[`B`]};
                    },
                    handleChange:function(event){
                        var checked = [];
                        var sel = event.target;    //獲取當前的DOM物件
                        for(var i=0; i<sel.length; i++){
                            var option = sel.options[i];
                            if(option.selected){
                                checked.push(option.value);
                            }
                        }
                        //設定options的值
                        this.setState({
                            options:checked
                        });
                    },
                    submitHandler:function(event){
                        event.preventDefault();    //阻止事件發生
                        alert(this.state.options);
                    },
                    render:function(){
                        return (
                            <form onSubmit={this.submitHandler}>
                                <select multiple="true" value={this.state.options} onChange={this.handleChange}>
                                    <option value="A">First Option</option>
                                    <option value="B">Second Option</option>
                                    <option value="C">Third Option</option>
                                </select>
                                <br/>
                                <button type="submit">Speak</button>
                            </form>
                        );
                    }
                    
                
                });

            //將元件加到對應的元素上
            React.render( <MySelect />, document.getElementById(`example`) );
        </script>
    </body>
</html>

注意：

　　1.使用React裡面的值作為html動態的值的時候不要給值新增引號如：  value=”{this.state.options}” 或者onChange=”{this.handleChange}”，這兩種寫法都是錯的。


相關文章