React jsonschema 访问formData答案

【问题标题】：React jsonschema access formDataReact jsonschema 访问formData
【发布时间】：2017-08-13 13:43:08
【问题描述】：

我是一个完整的 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 调用中添加 () 大括号，则会产生错误“无法读取未定义的属性 formData”。我对道具几乎一无所知，或者道具应该如何定义。我将不胜感激任何帮助！谢谢！

【问题讨论】：

您的组件是class 组件吗？能贴出组件的全部代码吗？
是的，这是我的应用组件。谢谢您的答复！我已经更新了帖子。
将this 添加到函数引用onSubmit={this.onSubmit}。但是，您的代码中还有其他看起来错误的东西，例如，您的构造函数不应该与组件的名称相同。应该是constructor(props){super(props)}
非常感谢！我对反应还很陌生，所以我还没有编写正确的反应代码。
很高兴它有帮助。我会将其发布为答案，以便您接受并关闭它

标签： javascript forms reactjs jsonschema

【解决方案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>

【讨论】：

非常感谢！！