javascript - React jsonschema访问formData

Question

我是一个完全的 React 初学者，所以很多简单的语法让我感到困惑。我有一个jsonschema在我的 create-react-app 中呈现完美的表单，但我不明白如何在提交表单时从表单中获取数据。

这是我的应用程序组件(它呈现我发誓)。

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”。我几乎对 Prop 一无所知，也不知道 Prop 应该如何定义。我将不胜感激任何帮助!谢谢!

Answer 1

使用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>