ant form 动态变更表单项
form 表单不能提前注册比如
render(){ const { visible,onCreate,onCancel, form, title } = this.props; let property = null; if(!isEmptyObject(this.props.propertys)){ property = this.props.propertys.propertys.filter((property)=>property.visiable) .sort((propertya,propertyb)=> propertya.index-propertyb.index ) .map((property)=>addFormFactory(property,this.props.form)); } let show = (this.state.tasktype == "测试任务") ? <CaseTask {...this.props} testtaskpropertys = {this.props.testtaskpropertys} /> : property const {getFieldDecorator} = form; // console.log(this.props); return ( <Modal visible={visible} title={title} okText="提交" cancelText="取消" onCancel={onCancel} onOk={onCreate} > <Form layout="vertical" > {(isEmptyObject(this.props.propertys))?null:(this.props.propertys.projectItem === "task") ? <FormItem label={"任务类型"}> {getFieldDecorator("任务类型", { rules: [{ required:false, message: `Please select your !` }], })( <RadioGroup onChange={this.handleClick.bind(this)}> <RadioButton value="普通任务">{"普通任务"}</RadioButton> <RadioButton value="测试任务">{"测试任务"}</RadioButton> </RadioGroup> )} </FormItem> : null } {/*{property}*/} {/*<CaseTask {...this.props} />*/} {show} </Form> </Modal> ); }
但是改造成这样
render(){ const { visible,onCreate,onCancel, form, title } = this.props; let property = null; const {getFieldDecorator,getFieldValue} = form; let typeButton = taskType.map((task)=><RadioButton value={task.taskId}>{task.taskName}</RadioButton>) return ( <Modal visible={visible} title={title} okText="提交" cancelText="取消" onCancel={onCancel} onOk={onCreate} > <Form layout="vertical" > {(isEmptyObject(this.props.propertys))?null:(this.props.propertys.projectItem === "task") ? <FormItem label={"任务类型"}> {getFieldDecorator("taskType", { rules: [{ required:true, message: `请选择任务类型` }], })( <RadioGroup onChange={this.handleClick.bind(this)}> {typeButton} </RadioGroup> )} </FormItem> : null } {(getFieldValue("taskType")===2)? <CaseTask form={form} testtaskpropertys = {this.props.testtaskpropertys}/>: (!isEmptyObject(this.props.propertys))?this.props.propertys.propertys.filter((property)=>property.visiable) .sort((propertya,propertyb)=> propertya.index-propertyb.index ) .map((property)=>addFormFactory(property,this.props.form)):""} </Form> </Modal> ); }
区别就是第一个会注册完全部的表单项组件,会产生cache,所有的组件都会注册到form上,不能通过更新组件来重新渲染form,第二个将组件渲染留到最后。并且根据动态判断会不断重新注册表单项