Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/26.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs Antd无法在动态输入字段中输入数据_Reactjs_Antd - Fatal编程技术网

Reactjs Antd无法在动态输入字段中输入数据

Reactjs Antd无法在动态输入字段中输入数据,reactjs,antd,Reactjs,Antd,当从数据库中获取关于字段的数据时,我创建了动态表单字段。都很好,都装好了。但我无法在输入字段中输入任何数据。使用getFieldDecorator中给定初始值的文档进行检查,但没有运气。我将在下面附上代码: export const BaseForm = (props) => { const FormItem = Form.Item; const RadioGroup = Radio.Group; const Option = Select.Option;

当从数据库中获取关于字段的数据时,我创建了动态表单字段。都很好,都装好了。但我无法在输入字段中输入任何数据。使用getFieldDecorator中给定初始值的文档进行检查,但没有运气。我将在下面附上代码:

    export const BaseForm = (props) => {
    const FormItem = Form.Item;
    const RadioGroup = Radio.Group;
    const Option = Select.Option;
    const [renderProcedureForm,setrenderProcedureForm] = useState();
    const getTextField = (fieldInfo)=>{
        const {procedureName,mandotory,show,status,patientProcedureID} = fieldInfo;
        if(show === 0 || status !== "Enable") return "";
        let rules  =[];
        if(mandotory === 1){
            rules.push({ required: true, message: "can't be blank" });
        }
        let fieldDecoratorObj = {
            rules: rules,
            initialValue: ""
        };
        return(
                <FormItem
                        {...formItemLayout} 
                        label={procedureName}
                        key = {patientProcedureID}
                        >
                        {
                            getFieldDecorator(patientProcedureID,                                
                                fieldDecoratorObj)(
                                <Input disabled={isView} /> 
                        )}
                </FormItem>  
        )        
    }

    const renderBasedOnInputType = (fieldInfo)=>{
        let { inputType } =fieldInfo;        
        if(!inputType) return;
        let dynamicElement = null;           
        switch(inputType){
            case "Text":
                dynamicElement = getTextField(fieldInfo)
                break;        
        }
        return dynamicElement;
    }

    const getFields = (subCategoryId) => {
        let  sortedArray = [];
        let categoryProcedure = procedureCategoryList.filter((category) => (category.patientProceduresubCategoryID === subCategoryId))
        sortedArray = categoryProcedure;
        return sortedArray.map(field => renderBasedOnInputType(field))   
    }

    const getSubCategoryInfo = (id,categoryName)=>{
        let dynamicFormList = subCategoryList.filter(subCategory => subCategory.categoryId === id)
        let resultArray = dynamicFormList;
        return resultArray.map( (subCategory,index) => {
            return(
                <div style={{paddingLeft : "10px"}}  key={index}>
                    <p>{subCategory.subCategoryName }</p>  
                    {getFields(subCategory.subCategoryId)}
                </div>
            )
        })
    }
    useEffect(() => {
        if(categoryId !== undefined && subCategoryList.length && procedureCategoryList.length){
            setrenderProcedureForm(
            <div key={1}>                      
                    { getSubCategoryInfo(categoryId)}
                </div>
            )
        }            
    },[categoryId,subCategoryList,procedureCategoryList])

    return (
        <Form name="inputForm" onSubmit={handleFormSubmit} >                
            {renderProcedureForm}
        </Form>
    )}
export const PatientForm = Form.create()(BaseForm);
export const BaseForm=(道具)=>{
const FormItem=表单项;
常量组=无线电组;
const Option=Select.Option;
常量[renderProcedureForm,setrenderProcedureForm]=useState();
const getTextField=(fieldInfo)=>{
const{procedureName,mandotory,show,status,patientProcedureID}=fieldInfo;
如果(显示===0 | |状态!==“启用”)返回“”;
让规则=[];
如果(强制力===1){
push({required:true,消息:“不能为空”});
}
设fielddecorobj={
规则:规则,
初始值:“
};
返回(
{
getFieldDecorator(patientProcedureID,
FieldDecorobj)(
)}
)        
}
const renderBasedOnInputType=(fieldInfo)=>{
设{inputType}=fieldInfo;
如果(!inputType)返回;
设dynamicElement=null;
开关(输入类型){
案例“文本”:
dynamicElement=getTextField(fieldInfo)
打破
}
返回动态加速;
}
常量getFields=(子类别ID)=>{
让Darray=[];
让categoryProcedure=procedureCategoryList.filter((category)=>(category.PatientProceduresSubCategoryId==子类别ID))
SorterDarray=分类程序;
返回sortedArray.map(字段=>renderBasedOnInputType(字段))
}
常量getSubCategoryInfo=(id,categoryName)=>{
让dynamicFormList=subCategoryList.filter(subCategory=>subCategory.categoryId==id)
让resultArray=dynamicFormList;
返回resultArray.map((子类别,索引)=>{
返回(
{subCategory.subCategory name}

{getFields(子类别.子类别ID)} ) }) } useffect(()=>{ if(categoryId!==未定义和子类别列表.length和过程类别列表.length){ setrenderProcedureForm( {getSubCategoryInfo(categoryId)} ) } },[categoryId,子类别列表,过程类别列表]) 返回( {renderProcedureForm} )} export const PatientForm=Form.create()(BaseForm);

提前谢谢