问题描述
我在我的应用程序中使用 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"
和 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>
);
我找不到任何示例,其中自定义 ui 以 react jsonschema 形式与 ArrayFieldTemplate 一起使用。谁能帮帮我吗?无法替换 react jsonschema 形式,因为此代码已在生产中使用。我只是想用自定义 UI 添加 ArrayFieldTemplate。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)