ReactJS中的自定义组件

来源：互联网发布：音频制作软件手机软件编辑：程序博客网时间：2024/06/05 12:50

可控自定义组件

<!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>

阅读全文

0 0