ReactJS中的自定义组件

最新推荐文章于 2024-08-07 08:45:40 发布

honghong.zhou

最新推荐文章于 2024-08-07 08:45:40 发布

阅读量1.5k

点赞数

分类专栏： react-js 文章标签： reactJS

本文链接：https://blog.csdn.net/chengQunBin/article/details/78408256

版权

react-js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

可控自定义组件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/react.js"></script>
        <script src="js/react-dom.js"></script>
        <script src="js/browser.min.js"></script>
    </head>
    <body>
        <script type="text/babel">
            var Radio=React.createClass({
                getInitialState:function(){
                    return {
                        value:this.props.defaultValue
                    };
                },
                handleChange:function(event){
                    if(this.props.onChange){
                        this.props.onChange(event);
                    }
                    this.setState({
                        value:event.target.value
                    });
                },
                render:function(){
                    var children=[];
                    var value=this.props.value||this.state.value;
                    React.Children.forEach(this.props.children,function(child,i){
                        var label=<label key={i}>
                            <input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value==value} onChange={this.handleChange}/>
                            {child.props.children}
                            <br/>
                    </label>;
                    children.push(label);
                    }.bind(this));
                    return <span>{children}</span>;
                }
            });
            var MyForm=React.createClass({
                getInitialState:function(){
                    return ({my_radio:"B"});
                },

                handleChange:function(event){
                    this.setState({
                        my_radio:event.target.value
                    });
                },
                submitHandler:function(event){
                    event.preventDefault();
                    alert(this.state.my_radio);
                },
                render:function(){
                    return (
                        <form onSubmit={this.submitHandler}>
                        <Radio value={this.state.my_radio} name="my_radio" onChange={this.handleChange}>
                            <option value="A">First option</option>
                            <option value="B">Second option</option>
                            <option value="C">Third option</option>
                        </Radio>
                        <button type="submit">Speak</button>
                        </form>
                    )
                }
            });

            ReactDOM.render(<MyForm></MyForm>,document.body);
        </script>
    </body>
</html>

不可控的自定义组件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/react.js"></script>
        <script src="js/react-dom.js"></script>
        <script src="js/browser.min.js"></script>
    </head>
    <body>
        <script type="text/babel">
            var Radio=React.createClass({
                getInitialState:function(){
                    return {
                        value:this.props.defaultValue
                    };
                },
                handleChange:function(event){
                    if(this.props.onChange){
                        this.props.onChange(event);
                    }
                    this.setState({
                        value:event.target.value
                    });
                },
                render:function(){
                    var children=[];
                    var value=this.props.value||this.state.value;
                    React.Children.forEach(this.props.children,function(child,i){
                        var label=<label>
                            <input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value==value} onChange={this.handleChange}/>
                            {child.props.children}
                            <br/>
                    </label>;
                    children['label'+i]=label;
                    }.bind(this));
                    return <span>{children}</span>;
                }
            });
            var MyForm=React.createClass({
                handleSubmit:function(event){
                    event.preventDefault();
                    alert(this.refs.radio.state.value);
                },
                render:function(){
                    return (
                        <form onSubmit={this.handleSubmit}>
                        <Radio ref="radio" name="my_radio" defaultValue="B">
                            <p value="A">First</p>
                            <option value="B">Second option</option>
                            <option value="C">Third option</option>
                        </Radio>
                        <button type="submit">Speak</button>
                        </form>
                    )
                }
            });

            ReactDOM.render(<MyForm></MyForm>,document.body);
        </script>
    </body>
</html>