Reactjs 使用react json模式表单创建的表单的自定义样式

我正在尝试使用react json模式表单创建表单。我是新的自定义模板相同。我希望表单中的所有小部件都在一行中。怎么做

我尝试了以下（组件），它来自他们网站上的自定义对象，但无法获得所需的结果

import React from 'react';

import Form from 'react-jsonschema-form';

/* this is my schma*/
const AdHocCheckSchema = {
    title: "search",

    type: "object",

    required: ["searchKeyword", "country"],

    properties: {

        searchKeyWord: {

            type: "string",

            title: "Search Keyword"

        },
        country: {
            type: "string",

            title: "country",

            enum: [
                "a",
                "b"
            ],
            enumNames: [
                "a",
                "b"
            ]
        }
    }
};

/*this is the ui schema*/

const adHocCheckUiSchema = {

    "ui:order": [
        "searchKeyWord",
        "country"
    ],
    "country": {
        "ui:widget": "select"
    }

};

function CustomTemplate(props) 
{    
   return (
        <div>
            {props.title} 

            {props.description}

            {props.properties.map(
             element => 
             <div className="property-wrapper">{element.content}</div>)}
        </div>
    );
}

const AdHocCheckComponent = () => {
    return (

            <Form
                className="tp-adhoccheck__horizontal"
                schema={AdHocCheckSchema}
                uiSchema={adHocCheckUiSchema}
                CustomTemplate={CustomTemplate}
            />


    );
};

export default AdHocCheckComponent;

从“React”导入React；
从“react jsonschema表单”导入表单；
/*这是我的施玛*/
常量AdHocCheckSchema={
标题：“搜索”，
类型：“对象”，
必需：[“searchKeyword”，“country”]，
特性：{
搜索关键字：{
键入：“字符串”，
标题：“搜索关键字”
},
国家：{
键入：“字符串”，
标题：“国家”，
枚举：[
“a”，
“b”
],
枚举名称：[
“a”，
“b”
]
}
}
};
/*这是ui模式*/
常量adHocCheckUiSchema={
“ui:订单”：[
“搜索关键字”，
“国家”
],
“国家”：{
“ui:小部件”：“选择”
}
};
功能自定义模板（道具）
{    
返回(
{props.title}
{props.description}
{props.properties.map(
元素=>
{element.content}}
);
}
常量AdHocCheckComponent=（）=>{
返回(
);
};
导出默认的AdHocCheckComponent；

---

我不知道如何在同一行中创建输入字段、选择小部件和按钮。到目前为止，它一行接一行地以默认形式显示。

您可以通过模板自定义每个字段的外观。鉴于表单作为对象提交，您需要调整ObjectFieldTemplate：

事实上，如果你去他们的游乐场（，“Custom Object”选项卡链接在顶部），你会看到一行中的所有字段（如果你的屏幕分辨率足够高，否则它们将被包装到后续的行中）。其实现该效果的源代码（通过自定义ObjectFieldTemplate组件）（位于以下位置：

function ObjectFieldTemplate（{TitleField，properties，title，description}）{
返回(
{properties.map（prop=>(
{prop.content}
))}
{说明}
);
}

我使用了customFieldTemplate和flex box，可以将其排成一行

export const customFieldTemplate=（道具）=>{
const{id，label，classNames，required，errors，children}=props；
返回(
{必需？'*'：null}
{label}
{儿童}
{错误}
);
}；

function ObjectFieldTemplate({ TitleField, properties, title, description }) {
  return (
    <div>
      <TitleField title={title} />
      <div className="row">
        {properties.map(prop => (
          <div
            className="col-lg-2 col-md-4 col-sm-6 col-xs-12"
            key={prop.content.key}>
            {prop.content}
          </div>
        ))}
      </div>
      {description}
    </div>
  );
}