は、私はそう単純な構文の多くは私に混乱して反応で完全な初心者ですjsonschemaアクセスFORMDATA

Question

を反応します。私はjsonschemaフォームを完全に私の作成 - 反応 - アプリでレンダリングするが、私はそれを提出するときにフォームからデータを取得する方法を理解していない。

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

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を読み取れません"というエラーが発生します。私は小道具や小道具の定義方法を事実上知らない。私はどんな助けもありがとう！ありがとうございました！

Answer 1

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>