反应 jsonschema 访问 formData

Question

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

这是我的 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!");

如果我保持原样，当我点击提交时什么也不会发生。如果我将 () 大括号添加到渲染方法中的 onSubmit 调用，它会产生错误 "cannot read property formData of undefined"。我几乎对道具一无所知，或者道具应该如何定义。我将不胜感激任何帮助！谢谢！

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>

反应 jsonschema 访问 formData

React jsonschema access formData

javascript

forms

jsonschema

reactjs