javascript - 自定义小部件未显示在 mozilla-services-react-jsonschema-form 中

Question

我使用 mozilla-react-jsonschema-form 创建了一个带有自定义字段的简单表单，我的代码如下

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import Form from "react-jsonschema-form";

const schema = {
  title: "Todo",
  type: "object",
  required: ["title"],
  properties: {
    title: {type: "string", title: "Title", default: ""},
    done: {type: "boolean", title: "Done?", default: false}
  }
};

const MyCustomWidget = (props) => {
  return (
    <input type="text"
      className="custom"
      value={props.value}
      required={props.required}
      onChange={(event) => props.onChange(event.target.value)} />
  );
};

const widgets = {
  myCustomWidget: MyCustomWidget
};

const uiSchema = {
  "ui:widget": "myCustomWidget"
}

const log = (type) => console.log.bind(console, type);

class App extends Component {
  render() {
    return (
      <Form schema={schema}

        onSubmit={log("submitted")}
        onError={log("errors")}
        uiSchema={uiSchema}
        widgets={widgets} />
    );
  }
}

export default App;

默认字段已创建，但自定义小部件未出现在表单中。，还是我做错了什么

Answer 1

尝试改变你的代码

const uiSchema = {  "ui:widget": "myCustomWidget"}

与

const uiSchema ={ title:{"ui:widget": "myCustomWidget"}}