2017-08-13 1 views
0

を反応します。私はjsonschemaフォームを完全に私の作成 - 反応 - アプリでレンダリングするが、私はそれを提出するときにフォームからデータを取得する方法を理解していない。は、私はそう単純な構文の多くは私に混乱して反応で完全な初心者ですjsonschemaアクセスFORMDATA

これは私のアプリケーションコンポーネント(それは私が誓うレンダリング)です。

class App extends Component { 
    App(){ 

    } 
    render() { 
    return (
     <div className="App"> 
     <div> 
      <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 
      </div> 
      <p className="App-intro"> 
      To get started, edit <code>src/App.js</code> and save to reload. 
      </p> 
     </div> 
     <div class = "json"> 
     <Form schema={schema} 
      onChange={log("changed")} 
      onSubmit={onSubmit} 
      onError={log("errors")} /> 
     </div> 
     </div> 
    ); 
    } 
} 

以下は、私のコードのJSX以外の部分です。

const schema = { 
    type: "object", 
    properties: { 
    summary: {type: "string"}, 
    location: {type: "string"}, 
    description: {type: "string"}, 
    sendNotifications: {type: "boolean", default: false}, 
    ...and so forth... 
} 

const onSubmit = ({formData}) => console.log("yay I'm valid!"); 

私はそれをそのまま残しても、私が提出すると何も起こりません。レンダリングメソッドでonSubmit呼び出しに中括弧を追加すると、 "undefinedのプロパティformDataを読み取れません"というエラーが発生します。私は小道具や小道具の定義方法を事実上知らない。私はどんな助けもありがとう!ありがとうございました!

+0

次のとおりです。
はあなたのコードの作業例を参照してください?あなたはコンポーネントのコード全体を投稿できますか? –

+0

はい、これは私のアプリケーションコンポーネントです。あなたのお返事ありがとうございます!私は投稿を更新しました。 – Pard

+0

'this'を関数参照' onSubmit = {this.onSubmit} 'に追加します。あなたのコードで間違って見える他のものがあります。例えば、あなたのコンストラクタはあなたのコンポーネントの同じ名前ではいけません。 'コンストラクタ(小道具){スーパー(小道具)} ' –

答えて

0

classコンポーネントを使用する場合は、thisキーワードonSubmit={this.onSubmit}を使用してハンドラを参照する必要があります。
サイドノートとして、コンストラクタの記述方法を変更する必要があります。あなたのコンポーネントが `class`コンポーネント

const Form = JSONSchemaForm.default; 
 

 

 
class App extends React.Component { 
 
    constructor(props){ 
 
    super(props); 
 
    } 
 

 
schema = { 
 
    type: "object", 
 
    properties: { 
 
    summary: {type: "string"}, 
 
    location: {type: "string"}, 
 
    description: {type: "string"}, 
 
    sendNotifications: {type: "boolean", default: false}, 
 
    } 
 
} 
 

 
onSubmit = ({formData}) => console.log("yay I'm valid!"); 
 

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

 
     </div> 
 
     <div class = "json"> 
 
     <Form schema={this.schema} 
 
      onSubmit={this.onSubmit} 
 
     /> 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 
ReactDOM.render(<App/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://unpkg.com/react-jsonschema-form/dist/react-jsonschema-form.js"></script> 
 
<div id="root"></div>

+0

ありがとうございます! – Pard

関連する問題