React(0.13) 定义一个多选的组件 

<!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}"，这两种写法都是错的。

posted @ 2016-03-25 15:18  天道酬勤，坚持！  阅读(622)  评论(0)    收藏  举报