node.js - 用react的for循环怎么实现重复输入RadioButton
问题描述
我用了antdesign的插件,想实现从后台获取一个数据num,然后根据这个num循环n变,输出单选框<RadioButton value='c'>张三</RadioButton>,但是控制台直接报错了ps.这是jsx页面
[ERROR] parser.babel-5.x: /page/localExaminationPlan2/app/components/appointExpertPostForm.jsx: Unexpected token (125:22) [E:/mavenWorkspace/labsforce/FrontEnd/lcy/myProject/page/localExaminationPlan2/app/components/appointExpertPostForm.jsx]
我该怎么写?
let formClass = React.createClass({ //注意处理提交表单,准备数据给ok action handleSubmit(e) { //表单校验 console.log(’-----’); let validateResult = this.props.form.validateFieldsAndScroll((errors, values) => { if (!!errors) {console.log(’Errors in form!!!’);return; }else{let params = ObjectAssign(//将隐藏值一并提交,如父id this.props.appointExpertPostFormReduce.get(’fieldValues’).toJSON(), this.props.form.getFieldsValue());this.props.appointExpertPostFormAction.onOk( params, this.props.notificationAction, Notification, this.postFormCallBack); } }); }, //表单提交成功回调 postFormCallBack(){ this.props.declarationDetailTableComponent.queryRecords(); },queryRecords(params={}){ //2.add order query 由table onFieldsChange 传入参数 let wheresParma = []; let queryParam = {}; let queryFormParams = {}; queryFormParams.wheres = wheresParma; queryParam.queryFormParams = queryFormParams; let paramsAssign = ObjectAssign(this.props.appointExpertPostFormReduce.get(’pagination’).toJSON(),queryParam,params); paramsAssign.queryFormParams = JSON.stringify(paramsAssign.queryFormParams); this.props.appointExpertPostFormAction.onShowPostForm(paramsAssign,this.props.notificationAction,Notification); }, render() { const {appointExpertPostFormReduce,appointExpertPostFormAction} = this.props; const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 27 }, }; return ( <p style={{display:'inline'}}><Modal visible={this.props.appointExpertPostFormReduce.get(’addModleVisible’)} confirmLoading={this.props.appointExpertPostFormReduce.get(’confirmLoading’)} width={583} maskClosable={false} footer={[ <Button style={{backGround:'#000'}} key='btn' type='ghost' size='large' onClick={this.props.appointExpertPostFormAction.onCancel}> 取 消 </Button>, <Button key='submit' type='primary' size='large' onClick={this.handleSubmit}> 确 定 </Button>, ]}> <Form horizontal> <p id='box'> <FormItem {...formItemLayout} label='选择专家'> <RadioGroup defaultValue='a' size='large'><RadioButton value='a'>赵六</RadioButton><RadioButton value='b'>李四</RadioButton><RadioButton value='c'>王五</RadioButton><RadioButton value='d'>张三</RadioButton> </RadioGroup> </FormItem> </p></Form></Modal> </p> ); },});var PostForm = Form.create()(formClass);module.exports = PostForm;
问题解答
回答1:比较简单的,在render函数里面定义一个array,然后for里面生成的东西依次push进去,最后显示
render() { let shows = [] for (let i = 0; i < this.props.appointExpertPostFormReduce.num; i++){shows.push(<RadioButton value={/*具体value*/} key={i}>{/*具体显示*/}</RadioButton>) }return ( <p style={{display:'inline'}}> //前面省略,贴代码最好省略无关的内容 <Form horizontal> <p id='box'> <FormItem {...formItemLayout} label='选择专家'> <RadioGroup defaultValue='a' size='large'><RadioButton value='a'>赵六</RadioButton><RadioButton value='b'>李四</RadioButton><RadioButton value='c'>王五</RadioButton><RadioButton value='d'>张三</RadioButton>{shows} </RadioGroup> </FormItem></p> );
},});
回答2:JSX里的{}不能直接用for,而且值要出来不用再加花括号,这代码有明显的错误。
要像这样才行,下面用箭头函数包起来,直接用函数也行:
<p>{()=> { for(var i=1; i<10; i++){ <p>i</p> } }}</p>
不过一般如果到render中的return语句,应该要在这之前先求出值再进去加在花括号中。而不是在里面作运算。
回答3:var items = this.props.appointExpertPostFormReduce.map((item, i)=>{ return (<RadioButton></RadioButton>{/***/} ); });
相关文章:
1. javascript - webpack build出错后如何定位文件?2. java - springboot使用容器加载时,如何预先获取ClassLoader资源?3. html5 - 想要写一个H5页面,就微信打开来那种,然后几个输入框,把数据保存在我后台(java)的数据库里,实现思路是怎样的?4. boot2docker无法启动5. android - 百度地图加载大量marker点有没有比较好的解决方案6. 怎么在phpstudy中用phpexcel上传数据到MYSQL?7. java - AtomicInteger等原子类,是不是不用volatile修饰,自带volatile属性?8. vue.js - 为什么我的vue项目上传到github不能预览?9. css3 邊框漸層 及 ios背景模糊?10. 请在微信客户端打开链接怎么在PC端打开