0

我react jsonschema form在我的应用程序中使用并在响应/请求中处理一个数组。我所做的是使用我的自定义 UI，而不是使用{element.children}它通过一些魔法创建 html 并提供所有可用的道具。下面是我的代码

    ArrayFieldTemplate = (props) => {
    console.log('ArrayfieldTemplate', props);
    let span = 2;
    props.items.map(element => (
        console.log('ArrayfieldTemplate element children', element.children.props.formData.Notes)            
        ));

    return (

        <div className={props.className} style={{ "display": "block" }}>               
            <Table responsive striped>                   
                <tbody>
            {                   
                props.items &&
                        props.items.map(element => (
                       
                        <tr key={element.index}>
                                <td>
                                    <input
                                        type="text"
                                        id={element.children.props.idSchema.UserNotes.$id}
                                        value={element.children.props.formData.UserNotes}
                                        onChange={this.handleChange}
                                    />
                                    {/*{element.children}*/}
                                </td>
                            <td className="align-text-bottom" style={{ verticalAlign:"bottom", textAlign:"left" }}>
                                <Button bsStyle="danger" className={"btn-xs"}
                                    onClick={(event) => { this.dropElement(event, element, element.index); }}
                                    >Delete</Button>
                                   
                               
                            </td>                                
                        </tr>
                                    
                                              
                ))
            }
                </tbody>
            </Table>

            {props.canAdd && (
                <div>
                    <p className=" array-item-add">
                        <Button bsStyle="success" onClick={props.onAddClick}>
                            Add
                        </Button>
                    </p>
                </div>
            )}
        </div>
    );
}

我想在表格中显示input type="text"and 。为简洁起见，我删除button了数组中的其他字段。{element.children.props.formData}现在，当第一次加载页面时，数据库中没有UserNotes，所以我看到空白文本框，但是当我输入一些内容并单击submit该数组时，当后端收到请求时，该数组仍然为空。

我正在使用react with typescript.

下面是表格代码

    return (
            <div>
                <Form id={"form"} schema={this.state.schema}
                    formData={this.state.data}
                    uiSchema={uiSchema}
                    onChange={() => { }}
                    onError={this.onError}
                    ArrayFieldTemplate={this.ArrayFieldTemplate} 
                    FieldTemplate={this.CustomFieldTemplate}
                    onSubmit={this.setSettingData}
                    validate={this.validate}
                    liveValidate={false}
                    showErrorList={false}
                    widgets={this.widgets}
                    fields={this.fields}
                    noHtml5Validate={true}
                />
            </div>
        );

我找不到任何以反应 jsonschema 形式将自定义 ui 与 ArrayFieldTemplate 一起使用的示例。谁能帮帮我吗？无法替换 react jsonschema 表单，因为此代码已在生产中使用。我只是想用自定义 UI 添加 ArrayFieldTemplate。

4

0 回答 0