时间戳

首页 > 解决方案 > 制服：创建自定义字段

reactjs - 制服：创建自定义字段

问题描述

我定义了以下简单模式：

import SimpleSchema from 'simpl-schema';

export const Comments = new Mongo.Collection("comments");

export const CommentsSchema = new SimpleSchema({
  comments: Array,
  "comments.$": Object,
  "comments.$.author": String
  "comments.$.text": String
})

我有一个组件AutoForm可以查看/编辑这个评论数组：

import {ErrorsField, SubmitField, ListField} from "uniforms-semantic";
import AutoForm from 'uniforms-semantic/AutoForm';

<AutoForm schema={CommentsSchema} onSubmit={comments => this.updateRequest(comments)} model={this.props.comments}>
  <ListField name={"comments"}/>
  <ErrorsField/>
  <SubmitField/>
</AutoForm>

this.updateRequest(...)是一个调用 Meteor 后端函数来更新 Mongo 集合的函数。

我想自定义ListField，以便对于每个评论，"comments.$.text"TextField 显示为允许换行符的更大文本框。

它目前只是一个单行字符串：当前列表字段

我考虑过重写一个自定义版本，ListField但对于像这样的小改动来说，这似乎是不必要的复杂。使用制服 API 添加这样的小自定义的最佳方法是什么？

标签： reactjsmeteorsemantic-uimeteor-autoformsimple-schema

解决方案

查看文档，您似乎可以指定 ListField 的内部工作方式。这是未经测试的，但我会猜测以下内容：

<ListField name="comments">
    <ListItemField name="$">
        <NestField name="">
            <TextField name="author" />
             <LongTextField name="text" />
        </NestField>
    </ListItemField>
</ListField>

https://github.com/vazco/uniforms/blob/master/INTRODUCTION.md#props-propagation

推荐阅读