2017-05-28 24 views
1

私は興味深いアプローチで遊んでいます。Invisible react-jsonschema-form

だから私はreact-jsonschema-formを読んだ。

だから、私はこのようなフォームをレンダリングするカスタム・コンポーネントを作成しました:

import React, { Component } from "react"; 
import Form from "react-jsonschema-form"; 

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

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

export default class myFrom extends Component { 
    render(){ 
      return ( 
      <Form schema={schema} 
      onChange={log("changed")} 
      onSubmit={log("submitted")} 
      onError={log("errors")} /> 
     ); 
    } 
} 

その後、私は私の作成反応するアプリダミープロジェクトのApp.jsでそれを参照されました:

import myFrom from './custom-forms-test' 
class App extends Component { 

    render() { 
    return ( 
     <div className="App"> 
      <div className="App-header"> 
       <img src={logo} className="App-logo" alt="logo" /> 
       <h2>Welcome to React</h2> 
      </div> 
       <myFrom/> 
     </div> 
    ); 
    } 
} 

export default App; 

しかし、何もレンダリングしません。 フォームがネストされたコンポーネントにできない可能性があります。出来ますか? ヒント?

ありがとうございます!

答えて

3

反応成分名は、大文字で始まる必要があります。 myFormからMyFormに名前を変更してみてください。

関連する問題