1. 首页
  2. IT资讯

ReactJS中的自定义组件

可控自定义组件:

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

相信很多人在刚接触前端或者中期时候总会遇到一些问题及瓶颈期,如学了一段时间没有方向感或者坚持不下去一个人学习枯燥乏味有问题也不知道怎么解决,对此我整理了一些资料 喜欢我的文章想与更多资深大牛一起讨论和学习的话 欢迎加入我的学习交流群907694362

原文始发于:ReactJS中的自定义组件

主题测试文章,只做测试使用。发布者:逗乐男神i,转转请注明出处:http://www.cxybcw.com/22287.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code