反應jsonschema訪問形式數據

我是一個完整的初學者反應，所以很多簡單的語法令我感到困惑。我有一個jsonschema表單，它在我的create-react-app中呈現得非常好，但我不知道如何在提交表單時從表單獲取數據。反應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!");

如果我離開它，當我點擊提交沒有任何反應。如果我在render方法中將（）括號添加到onSubmit調用中，則會產生錯誤「無法讀取未定義的屬性formData」。我對道具幾乎一無所知，或者道具應該如何定義。我將不勝感激任何幫助！謝謝！

來源

2017-08-13 Pard

是你的分量'class'成分？你可以發佈組件的完整代碼嗎？ –

是的，這是我的應用程序組件。感謝您的答覆！我已更新該帖子。 – Pard

將'this'加入函數引用'onSubmit = {this.onSubmit}'。還有其他的東西在你的代碼中看起來不對，例如你的構造函數不應該與你的組件名稱相同。它應該是'構造函數（道具）{super（道具）}' –

使用class組件時，需要使用this關鍵字onSubmit={this.onSubmit}來引用處理程序。
作爲一個方面說明，你應該改變你的構造函數的寫法。
見你的代碼的工作示例：

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>

來源

2017-08-13 14:38:31

非常感謝！ – Pard

反應jsonschema訪問形式數據

回答

相關問題