Блог

Я использую react jsonschema form в своем приложении и обрабатываю массив в ответе / запросе. То, что я сделал, — это использовал свой пользовательский интерфейс вместо использования {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 amp;amp;
                        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 amp;amp; (
                <div>
                    <p className=" array-item-add">
                        <Button bsStyle="success" onClick={props.onAddClick}>
                            Add
                        </Button>
                    </p>
                </div>
            )}
        </div>
    );
}
 

Я хочу показать input type="text" и 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>
        );
 

Я не смог найти ни одного примера, где пользовательский интерфейс используется с ArrayFieldTemplate в форме react jsonschema. Кто-нибудь может мне помочь, пожалуйста? Не могу заменить форму react jsonschema, потому что этот код уже используется в производстве. Я просто пытаюсь добавить табличку ArrayFieldTemplate с пользовательским пользовательским интерфейсом.